background-image

요약

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

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

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

문법

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

명세

브라우저 호환성

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.

더 보기

• Multiple backgrounds
• Image-related articles: <image>, linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient, element.