🌎 Web/CSS
[CSS] background-size, origin, clip
오늘 ONEUL
2022. 3. 27. 22:00
background의 다양한 속성 중 다음 3가지에 대해 알아보자!
- background-size
- background-origin
- background-size
background-size
배경 이미지의 크기를 설정한다. 직접 수치를 입력할 수도 있고, contain 또는 cover 중에 선택할 수도 있다.
| 속성값 | 설명 |
| contain | 이미지의 비율은 유지하면서, 크기를 가능한한 크게 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 작거나 같게 됨. |
| cover | 이미지의 비율은 유지하면서, 요소의 모든 영역을 가리도록 크기 조절. 배경 이미지의 크기가 해당 요소의 크기보다 항상 크거나 같게 됨. |
(↓background img를 화면에 꽉 차게 설정하는 방법은 아래 게시글 참고↓)
2022.03.25 - [CSS] - [CSS] background img 꽉차게 채우는 법
[CSS] background img 꽉차게 채우는 법
배경 이미지를 화면에 꽉 차게 채워야 하는 경우가 종종 있다. 원하는 조건은 다음과 같다. 화면에 보이는 전체 페이지를 여백 없이 이미지로 채우기 필요에 따라 이미지 크기 조정 이미지의 중
oneul-losnue.tistory.com
background-origin
배경 이미지의 위치를 결정할 기준을 설정한다. 3가지 속성 값을 사용할 수 있다.
| 속성값 | 설명 |
| border-box | 배경 이미지는 '테두리'의 왼쪽 상단에서 시작한다. border까지 width에 포함된다. |
| padding-box | (기본값) 배경 이미지는 패딩 가장자리의 왼쪽 상단 모서리에서 시작한다. |
| content-box | 배경 이미지는 '콘텐츠'의 왼쪽 상단에서 시작한다. 컨텐츠 크기 안에 들어간다. |
background-clip
해당 요소의 배경을 어느 영역까지 설정할지를 결정한다. 3가지 속성 값을 사용할 수 있다.
| 속성값 | 설명 |
| border-box | (기본값) 배경이 '테두리'의 바깥쪽 가장자리에 칠해진다. |
| padding-box | 배경이 '패딩'의 바깥쪽 가장자리에 칠해진다. |
| content-box | 배경이 콘텐츠 상자 안에 그려진다. |
※ 참고자료