CSS3를 사용하면 엘리먼트에 여러개의 배경을 지정할 수 있다. 첫 번째로 지정한 배경이 가장 앞에 보이고 나중에 지정한 배경이 뒤에 보인다. 배경 색상(color)는 맨 마지막에만 지정할 수 있다.
여러개의 배경을 지정하는건 간단하다.
.myclass {
background: background1, background 2, ..., backgroundN;
}
배경에 관련된 다른 속성들은 background 속성에 한꺼번에 지정할 수도 있고 리스트 형태로 각각 지정할 수도 있다. 하지만 background-color 속성은 리스트 형태로 지정할 수 없다. 다음과 같은 속성들은 리스트 형태로 동시에 여러개 지정할 수 있다. background, background-attachment, background-clip, background-image, background-origin, background-position, background-repeat, background-size
예제
이 예제에서는 파이어포스 로고, 선형 그라디언트, 꽃이 그려진 사진을 한 엘리먼트에 적용해본다.
.multi_bg_example {
background: url(https://demos.hacks.mozilla.org/openweb/resources/images/logos/firefox-48.png),
linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
url(https://demos.hacks.mozilla.org/openweb/resources/images/patterns/flowers-pattern.jpg);
background-repeat: no-repeat, no-repeat, repeat;
background-position: bottom right, left, right;
}
| Result |
 |
첫 번째 배경으로 지정한(리스트에서 첫번째) 파이어폭스 로고가 맨 위에 보이고 선형 그라디언트, 꽃이 그려진 사진 순서대로 보인다. background-repeat 와 background-position) 속성들도 리스트 형태로 지정되었는데 순서대로 해당하는 배경에 적용된다. 예를 들어 background-repeat 속성 중 첫 번째 no-repeat는 첫 번째 배경인 파이어폭스 로고에 적용된다.