background-image
CSS background-image
속성은 요소의 배경 이미지를 한 개나 여러 개 지정합니다.
시도해보기
여러 개의 배경 이미지는 쌓임 맥락에 따라 서로의 위에 놓입니다. 맨 처음 지정한 이미지가 제일 위에(사용자에게 제일 가까운 것 처럼) 위치합니다.
테두리는 배경 이미지 위에, background-color
는 밑에 그려집니다. 요소 박스와 테두리에 관련하여 배경 이미지를 어떻게 그릴지는 background-clip
과 background-origin
CSS 속성이 정의합니다.
브라우저는 값에 유효하지 않은 URI를 지정하는 등 주어진 이미지를 그릴 수 없을 때 none
키워드를 사용한 것처럼 처리합니다.
참고: 지정한 이미지가 불투명해서 아래의 배경색을 볼 수 없더라도 background-color
는 지정해야 합니다. 네트워크가 내려가는 등 이미지를 불러올 수 없는 상황에서 배경 색이 대체할 수 있기 때문입니다,
구문
값
none
-
배경 이미지의 부재를 나타내는 키워드입니다.
<image>
-
배경으로 사용할 이미지입니다. 여러 개의 배경 이미지를 사용할 땐 쉼표로 구분한 다수의 값을 지정하세요.
접근성 고려사항
브라우저는 배경 이미지에 대한 어떠한 추가 정보도 접근성 보조 기술에 제공하지 않습니다. 특히 스크린 리더의 경우 배경 이미지의 존재 유무조차 알려주지 않습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.
형식 정의
초기값 | none |
---|---|
적용대상 | all elements. It also applies to ::first-letter and ::first-line . |
상속 | no |
계산 값 | as specified, but with url values made absolute |
Animation type | discrete |
형식 구문
background-image =
<bg-image>#
<bg-image> =
<image> |
none
<image> =
<url> |
<gradient>
<url> =
<url()> |
<src()>
<url()> =
url( <string> <url-modifier>* ) |
<url-token>
<src()> =
src( <string> <url-modifier>* )
예제
배경 이미지 레이어링
별 모양 이미지는 배경이 투명하고, 고양이 이미지 위에 위치합니다.
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
p {
font-size: 1.5em;
color: #fe7f88;
background-image: none;
background-color: transparent;
}
div {
background-image: url("mdn_logo_only_color.png");
}
.catsandstars {
background-image: url("startransparent.gif"), url("catfront.png");
background-color: transparent;
}
결과
명세
Specification |
---|
CSS Backgrounds and Borders Module Level 3 # background-image |
브라우저 호환성
BCD tables only load in the browser
같이 보기
- CSS로 이미지 스프라이트 구현하기
<img>
- 이미지 관련 자료형:
<image>
,<gradient>
- 이미지 관련 함수:
linear-gradient()
,radial-gradient()
,repeating-linear-gradient()
,repeating-radial-gradient()
,element()
,image()
,image-set()
,url()