예
의 배경 이미지 설정 <body> 요소를 :
body
{
background-image: url("paper.gif");
background-color: #cccccc;
}
»그것을 자신을 시도 더 "Try it Yourself" 아래의 예.
정의 및 사용
배경 이미지 속성은 요소의 하나 또는 그 이상의 배경 이미지를 설정합니다.
요소의 배경 패딩과 경계를 포함하는 요소의 전체 크기 (but not the margin) .
기본적으로 배경 이미지는 요소의 왼쪽 상단 모서리에 배치, 모두 수직 및 수평으로 반복된다.
Tip: 항상 이미지를 사용할 수없는 경우에 사용하는 배경 색상을 설정합니다.
| 기본값: | none |
|---|---|
| 상속 : | no |
| 애니메이션 : | no. Read about animatable |
| 번역: | CSS1 + new values in CSS3 |
| 자바 스크립트 구문 : | object .style.backgroundImage="url(smiley.gif)" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| background-image | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: IE8 및 이전 하나의 요소에 여러 개의 배경 이미지를 지원하지 않습니다.
CSS 구문
background-image:url|none|initial|inherit;속성 값
| 값 | 기술 |
|---|---|
| url(' URL ') | 이미지에 대한 URL. 쉼표로 URL을 분리, 하나 이상의 이미지를 지정하려면 |
| none | 어떤 배경 이미지가 표시되지 않습니다. 이 기본이다 |
| initial | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 |
| inherit | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 |
더 예
예
에 대해 여러 배경 이미지를 설정 <body> 요소 :
body {
background-image: url("img_tree.gif"),
url("img_flwr.gif");
background-color: #cccccc;
}
»그것을 자신을 시도 관련 페이지
CSS 자습서 : CSS 배경
CSS3 튜토리얼 : CSS3의 배경
HTML DOM 참조 : backgroundImage property