CSS 다중 배경 속성이란?
CSS 다중 배경(multiple background) 속성을 사용하면 별도의 HTML 코드를 추가하지 않고도 하나의 요소에 두 개 이상의 배경 이미지를 동시에 적용할 수 있습니다. 쉼표(,)로 구분해 원하는 만큼 이미지를 나열하며, 각 이미지마다 위치(position)와 반복(repeat) 방식 등을 개별적으로 지정할 수 있습니다.
참고로 먼저 선언된 이미지가 가장 앞쪽(위) 레이어에 배치되므로, 배경 순서를 고려해 작성하는 것이 중요합니다.
다중 배경 기본 문법
#multibackground {
background-image: url(/css/images/logo.png), url(/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat;
padding: 75px;
}배경 관련 주요 속성
| 번호 | 속성 및 설명 |
|---|---|
| 1. | background 배경과 관련된 모든 속성(색상, 이미지, 위치, 반복 등)을 하나의 선언으로 한 번에 설정할 때 사용합니다. |
| 2. | background-clip 배경이 어느 영역까지 그려질지(페인팅 영역)를 지정합니다. border-box, padding-box, content-box 값을 사용할 수 있습니다. |
| 3. | background-image 요소의 배경으로 사용할 이미지를 지정합니다. 다중 배경에서는 쉼표로 여러 이미지를 나열합니다. |
| 4. | background-origin 배경 이미지가 어디를 기준으로 배치될지(원점 위치)를 지정합니다. |
| 5. | background-size 배경 이미지의 크기를 지정합니다. auto, cover, contain 또는 픽셀·퍼센트 값 등을 사용할 수 있습니다. |
활용 팁
다중 배경은 장식용 테두리, 워터마크, 그라데이션 오버레이 등을 구현할 때 특히 유용합니다. 또한 모든 최신 브라우저에서 지원되므로 벤더 접두사 없이 안심하고 사용할 수 있습니다.