Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

background-image

현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.

요약

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

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

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

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

초기값none
적용대상all elements. It also applies to ::first-letter and ::first-line.
상속no
Mediavisual
Computed valueas specified, but with URIs made absolute
Animatableno
Canonical orderthe unique non-ambiguous order defined by the formal grammar

문법

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

예제

Note that the star image is partially transparent and is layered over the cat image.

HTML

<div>
    <p class="catsandstars">
        This paragraph is full of cats<br />and stars.
    </p>
    <p>This paragraph is not.</p>
    <p class="catsandstars">
        Here are more cats for you.<br />Look at them!
    </p>
    <p>And no more.</p>
</div>

CSS

pre, p {
    font-size: 1.5em;
    color: #FE7F88;
    background-color: transparent;
}

div {
  background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

p {
  background-image: none;
}

.catsandstars {
  background-image:  url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), 
                     url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}

Result

명세

명세 상태 주석
CSS Backgrounds and Borders Module Level 3
The definition of 'background-image' in that specification.
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)
The definition of 'background-image' in that specification.
Recommendation From CSS1, the way images with and without intrinsic dimensions are handled is now described.
CSS Level 1
The definition of 'background-image' in that specification.
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 No support No support No support
image-rect() No support (Yes)-moz No support No support No support
Any <image> value. ? No support ? ? ?
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 No support
element() (Yes)-moz ? ? ?
image-rect() (Yes)-moz No support No support No support
Any <image> value No support ? ? ?

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.

더 보기

문서 태그 및 공헌자

 이 페이지의 공헌자: Sebastianz, teoli, SphinxKnight, fscholz, jaemin_jo
 최종 변경: Sebastianz,