CSS 배경 속성
예시
하나의 선언에서 다른 배경 속성을 설정합니다.
body
{
background: lightblue url("img_tree.gif") no-repeat fixed center;
}
정의 및 사용
속성은 다음 background에 대한 약식 속성입니다.
위의 값 중 하나가 누락되어도 문제가 되지 않습니다. 예를 들어 background:#ff0000 url(smiley.gif); 허용됩니다.
| 기본값: | 개별 속성 보기 |
|---|---|
| 상속: | 아니요 |
| 애니메이션 가능: | 예, 개별 속성을 참조하십시오 . 애니메이션 가능 에 대해 읽기 |
| 버전: | CSS1 + CSS3의 새로운 속성 |
| 자바스크립트 구문: | object .style.background="red url(smiley.gif) 왼쪽 상단 반복 없음" |
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
참고: 아래의 각 값에 대한 개별 브라우저 지원을 참조하십시오.
CSS 구문
background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
참고: 약식 선언의 속성 중 하나가 bg-size 속성인 경우 /(슬래시)를 사용하여 bg-position 속성과 구분해야 합니다(예: background:url(smiley.gif) 10px 20px/50px 50px). ; 왼쪽에서 10픽셀, 위쪽에서 20픽셀 위치에 배경 이미지가 생성되며 이미지 크기는 너비 50픽셀, 높이 50픽셀이 됩니다.
참고: 여러 배경 이미지 소스를 사용하지만 배경 색상도 원하는 경우 background-color 매개변수는 목록의 마지막에 있어야 합니다.
속성 값
| Value | Description | CSS |
|---|---|---|
| background-color | Specifies the background color to be used | 1 |
| background-image | Specifies ONE or MORE background images to be used | 1 |
| background-position | Specifies the position of the background images | 1 |
| background-size | Specifies the size of the background images | 3 |
| background-repeat | Specifies how to repeat the background images | 1 |
| background-origin | Specifies the positioning area of the background images | 3 |
| background-clip | Specifies the painting area of the background images | 3 |
| background-attachment | Specifies whether the background images are fixed or scrolls with the rest of the page | 1 |
| initial | Sets this property to its default value. Read about initial | 3 |
| inherit | Inherits this property from its parent element. Read about inherit | 2 |
관련 페이지
CSS 튜토리얼: CSS 배경 , CSS 배경(고급)
HTML DOM 참조: 배경 속성