1. 개요
배경을 설정할 수 있는 속성.
2. 상세
2.1. background-size
배경 이미지의 크기를 조절할 수 있다.
default 값은 auto이며, 원래 배경 이미지 크기만큼 표시된다.
이외에도 다른 값을 지정하여 속성을 부여할 수 있다.
명시적으로 픽셀값을 부여하거나 백분율을 지정할 수 있으며, 키워드를 통해서도 지정할 수 있다.
cover
요소를 배경 이미지로 다 덮는다.
이에 따라 배경 이미지가 확대되거나 축소될 수 있다.
contain
배경 이미지가 완전히 다 보이도록 한다.
이에 따라 배경 이미지가 확대되거나 축소될 수 있다.
2.2. background-positon
배경 이미지의 위치를 지정할 수 있다.
2.3. background-repeat
배경 이미지의 반복 속성을 지정할 수 있다.
2.4. background-origin
배경 이미지가 어디에서부터 시작하는지를 지정할 수 있다.
default 값은 padding-box이다.
이때 참고해야 될 점은, 이 속성은 배경 이미지의 시작 지점을 정할 뿐, 끝나는 지점을 정하지는 않는다는 점이다.
끝나는 지점, 즉 배경 이미지가 보여지는 지점을 정하기 위해서는 background-clip 속성을 부여해야 한다.
위의 예시를 살펴보면, 배경 이미지는 content-box에서부터 시작하기 때문에, 배경 이미지는 좌측 상단의 border 영역을 침범하지 않는다.
하지만 background-clip 속성이 지정되지 않았기 때문에 default 값인 border-box로 지정된다.
따라서 배경 이미지가 content-box 영역에서 시작하고, border-box에서 끝나는 형태로 나타나게 된다.
2.5. background-clip
배경 이미지가 어디까지 표시되어야 할지를 지정할 수 있다.
default 값은 border-box이다.
앞서 살펴본 예시에서 background-clip 속성에 content-box 값을 추가한 경우이다.
배경 이미지는 content-box에서 시작하고, content-box에서 끝나므로, 배경 이미지가 border를 침범하지 않는다.
이번에는 background-origin을 border-box로 놓은 뒤, background-clip을 content-box로 설정한 경우이다.
이미지가 모두 border를 침범하지 않는다는 점은 동일하지만, 배경 이미지가 border-box영역에서 시작한 뒤, content-box 영역까지만 표시되도록 하기 위해 border-box 영역에 있는 부분을 제거하게 된다.
따라서 직전의 사례와 표시되는 꼴은 동일하지만, 잘 보면 이미지의 왼쪽 및 상단이 조금 짤렸음을 볼 수 있다.
2.6. background-image
배경 이미지를 지정할 수 있다.
url()을 통해 내부 및 외부 자원을 이미지로 등록할 수 있으며, 그 외에도 그라데이션을 이미지로 적용할 수 있다.
한편 이미지는 서로 겹쳐보이게 지정할 수 있다(stack).
위의 사례와 같이 각 이미지를 콤마로 구분하면 한 영역에 여러 이미지를 겹칠 수 있다.
단, 겹친 이미지가 서로 보이기 위해서는 투명도 조절을 해야 한다.
또한 가장 먼저 선언된 요소가 가장 앞에 놓이게 된다.