여러개의 배경 지정하기

공헌자 숫자: 3명

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(http://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(http://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
css_multibg.png

첫 번째 배경으로 지정한(리스트에서 첫번째) 파이어폭스 로고가 맨 위에 보이고 선형 그라디언트, 꽃이 그려진 사진 순서대로 보인다. background-repeatbackground-position) 속성들도 리스트 형태로 지정되었는데 순서대로 해당하는 배경에 적용된다. 예를 들어 background-repeat 속성 중 첫 번째 no-repeat는 첫 번째 배경인 파이어폭스 로고에 적용된다.

더 보기

문서 태그 및 공헌자

태그: 
Contributors to this page: Inyoung, teoli, jaemin_jo
최종 변경: Inyoung,