background-image

요약

background-image CSS 속성은 엘리먼트의 배경 이미지를 지정한다. 배경 이미지가 여러개 지정되었다면 먼저 지정된 것 부터 차례로 쌓인다. 처음 지정된 이미지가 가장 먼저 그려지고  마지막으로 지정된 이미지가 가장 나중에 그려진다(마지막에 지정한 이미지가 사용자가 보는 화면과 가장 가깝게 그려진다). borders 속성은 이미지 위에 그려지며 background-color 속성은 이미지 아래에 그려진다. 

엘리먼트 박스에 대한 이미지의 위치는 background-clipbackground-origin 속성을 지정함으로써 변경할 수 있다.

지정된 이미지를 그릴수 없을 때에는(예를 들어 존재하지 않는 주소로 지정했으면) 브라우저는 none 값이 설정된 것으로 간주한다. 

참고: 불투명한 이미지를 배경으로 지정하더라도 항상 background-color 속성을 지정하는걸 권장한다. 네트워크 오류와 같이 이미지를 불러오는데 문제가 발생했을 경우에는 background-color 속성을 대비책으로 사용하기 때문이다. 

문법

background-image: background-image[, background-image]*
background-image
배경으로 사용될 <image> 또는 키워드 none을 지정한다. 이때 none은 배경으로 이미지를 사용하지 않음을 의미한다. multiple backgrounds 가 지원되는 환경이라면 여러개의 이미지를 지정할 수 있다.

예제

View the live example

body { 
  background-image: url("images/darkpattern.png"); 
}

div { 
  background-image: url("images/foo.png"), url("images/bar.png"); 
}

p { 
  background-image: none; 
}

명세

명세 상태 주석
CSS Backgrounds and Borders Module Level 3 Candidate Recommendation From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any <image> CSS data type.
CSS Level 2 (Revision 1) Recommendation From CSS1, the way images with and without intrinsic dimensions are handled is now described.
CSS Level 1 Recommendation  

브라우저 호환성

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 1.0 (1.7 or earlier) 4.0 3.5 1.0
Multiple backgrounds 1.0 3.6 (1.9.2) 9.0 yes 1.3
Gradients 1.0-webkit 3.6 (1.9.2)-moz 10 11+-o 4.0-webkit
SVG images 8.0 4.0 (2.0) 9.0 9.5 5.0 [1]
element() ? (Yes)-moz Not supported Not supported Not supported
image-rect() Not supported (Yes)-moz Not supported Not supported Not supported
Any <image> value. ? Not supported ? ? ?
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support yes yes yes yes
Multiple backgrounds yes yes yes yes
Gradients yes -webkit
old webkit syntax for iOS 4.2 and older
? ? yes-webkit
old webkit syntax
SVG images yes [1] yes yes Not supported
element() (Yes)-moz ? ? ?
image-rect() (Yes)-moz Not supported Not supported Not supported
Any <image> value Not supported ? ? ?

Notes

[1] Support of SVG in CSS background is incomplete in the current version of iOS Safari (5.0). The same for Safari prior 5.0.

더 보기

Document Tags and Contributors

Contributors to this page: jaemin_jo
Last updated by: jaemin_jo,