예
하나의 선언에 다른 배경 속성을 설정합니다 :
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
»그것을 자신을 시도 정의 및 사용
배경 약식 속성은 하나의 선언에 모든 배경 속성을 설정합니다.
설정할 수있는 속성은 다음과 같습니다 배경 색상, 배경 이미지, 배경 위치, 배경 크기, 배경 반복, 배경 - 기원, 배경 클립 및 배경 - 첨부.
위의 값 중 하나가, 예를 들어, 배경없는 경우 그것은 중요하지 않습니다 : # FF0000의의 url(smiley.gif) ; 허용된다.
| 기본값: | see individual properties |
|---|---|
| 상속 : | no |
| 애니메이션 : | yes, see individual properties . Read about animatable Try it |
| 번역: | CSS1 + new properties in CSS3 |
| 자바 스크립트 구문 : | object .style.background="red url(smiley.gif) top left no-repeat" Try it |
브라우저 지원
테이블의 숫자는 완전히 속성을 지원하는 최초의 브라우저 버전을 지정합니다.
| 재산 | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: 인터넷 익스플로러 8 이전 버전은 하나의 요소에 여러 개의 배경 이미지를 지원하지 않습니다.
참고 : 아래의 각 값에 대한 개별 브라우저 지원을 참조하십시오.
CSS 구문
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;참고 : 속기 선언의 속성 중 하나가 BG-size 속성 인 경우, 당신은 / 사용해야합니다 (slash) BG-position 속성, 예로부터 별도의 background:url(smiley.gif) 10px 20 픽셀 / 50 픽셀 50 픽셀 ; 배경 화상을 초래할 것이며, 좌측 10 화소, 위로부터 20 픽셀의 위치와 화상의 크기가 50 픽셀 폭 및 50 픽셀 높이 것이다.
참고 : 여러 배경 이미지 소스를 사용하는 경우뿐만 아니라 배경 색상을 원하는, 배경 색상 매개 변수 목록에서 마지막으로 할 필요가있다.
속성 값
| 값 | 기술 | CSS |
|---|---|---|
| background-color | 이용 될 수있는 배경색이 지정 | 1 |
| background-image | 사용되는 하나 또는 그 이상의 배경 이미지를 지정 | 1 |
| background-position | 배경 이미지의 위치를 지정 | 1 |
| background-size | 배경 이미지의 크기를 지정 | 삼 |
| background-repeat | 어떻게 배경 이미지를 반복 지정 | 1 |
| background-origin | 배경 이미지의 위치 영역을 지정 | 삼 |
| background-clip | 배경 이미지의 그림 영역을 지정 | 삼 |
| background-attachment | 배경 이미지가 페이지의 나머지 부분과 고정 또는 스크롤할지 여부를 지정합니다 | 1 |
| 머리 글자 | 기본값으로이 속성을 설정합니다. 초기에 대해 알아보기 | 삼 |
| 상속 | 부모 요소에서이 속성을 상속합니다. 대한 상속 읽기 | 이 |
관련 페이지
CSS 자습서 : CSS 배경
CSS3 튜토리얼 : CSS3의 배경
HTML DOM 참조 : background property