Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 그램 온도
- 리눅스 권한설정 리눅스 유마스크
- 아나콘다 install
- Forensically
- 티스토리가운데정렬
- 노트북CPU성능
- Error : Due to incompatibility with several Python libraries
- linux 권한설정
- 티스토리표가운데
- 그램 온도 낮추기
- LG 그램 온도
- chmod 설정
- 리눅스 휴지통 비우기
- LG CONTORL CENTER
- zsteg
- umask and 연산
- LG 컨트롤 센터 온도
- 리눅스 디스크 다 참
- 표 가운데정렬
- chmod umask
- 노트북CPU견적
- 표 가운데정렬방법
- 유마스크
- 스테가노그래피 포렌식 툴
- 노트북CPU성능비교
- LG 컨트롤 센터
- 스테가노그래피 툴
- Image Steganography
- 'Destination Folder' cannot contain non-ascii characters (special characters or diacritics). Please choose another location.
- 정보보안용어
Archives
- Today
- Total
공대생의 에러일기
CSS background-size 속성 contain과 cover 차이 본문
반응형
css에서 뒷배경을 설정해줄 때는 background-size 로 설정을 해줍니다
이때 배경을 채우는 속성에는 여러가지가 있지만 contain과 cover에 대해 설명하겠습니다
원본이 아래 사진과 같다면

# contain
이미지가 잘리거나 찌그러지지 않는 한도 내에서 제일 크게 설정
(이미지가 원본 그대로 살아있으며 따로 설정하지 않으면 이미지가 반복됩니다.)

# cover
이미지가 찌그러지지 않는 한도 내에서 제일 크게 설정
(이미지를 잘라서 빈 공간이 생기지 않도록 합니다.)

조금 더 자세히 알고싶다면 링크 참조
https://developer.mozilla.org/ko/docs/Web/CSS/background-size
background-size - CSS: Cascading Style Sheets | MDN
배경 이미지로 덮이지 않은 공간은 background-color 속성으로 채워지고, 배경 이미지에서 투명하거나 반투명한 부분을 통해서도 배경색이 보입니다.
developer.mozilla.org
'Web' 카테고리의 다른 글
티스토리 표 가운데로 정렬하기 (0) | 2024.06.08 |
---|---|
[html] button 박스 가운대로 옮기는 법/ margin으로 안 옮겨질 때 (0) | 2021.07.31 |
HTTP 웹 프로토콜 특징 - 장점&단점 (0) | 2021.03.11 |
Comments