스타일 배경 속성
예시
문서 배경 스타일 지정:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
background 속성은 속기 형식으로 최대 8개의 개별 배경 속성을 설정하거나 반환합니다.
이 속성을 사용하여 다음 중 하나 이상을 설정/반환할 수 있습니다(순서에 관계없이):
- 배경색
- 배경 이미지
- 배경 반복
- 배경 첨부
- 배경 위치
- 배경 크기
- 배경 출처
- 배경 클립
위의 속성은 별도의 스타일 속성으로 설정할 수도 있습니다. 보다 나은 제어성을 위해 고급 작성자가 아닌 경우 별도의 속성을 사용하는 것이 좋습니다.
브라우저 지원
표의 숫자는 속성을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
Property | |||||
---|---|---|---|---|---|
background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
참고: 아래의 각 값에 대한 개별 브라우저 지원을 참조하십시오.
통사론
배경 속성을 반환합니다.
object.style.background
배경 속성을 설정합니다.
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
속성 값
Value | Description |
---|---|
color | Sets the background color of an element |
image | Sets the background image for an element |
repeat | Sets how a background image will be repeated |
attachment | Sets whether a background image is fixed or scrolls with the page |
position | Sets the starting position of a background image |
size | Sets the size of a background image |
origin | Sets the background positioning area |
clip | Sets the painting area of a background image |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
기술적 세부 사항
기본값: | 투명 없음 반복 스크롤 0% 0% 자동 패딩 상자 테두리 상자 |
---|---|
반환 값: | 요소의 배경을 나타내는 String |
CSS 버전 | CSS1 + CSS3의 새로운 속성 |
더 많은 예
예시
DIV 요소의 배경 변경:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
예시
문서의 배경색 설정:
document.body.style.backgroundColor = "red";
예시
문서의 배경 이미지 설정:
document.body.style.backgroundImage = "url('img_tree.png')";
예시
배경 이미지를 반복 없음으로 설정합니다.
document.body.style.backgroundRepeat = "repeat-y";
예시
배경 이미지를 고정으로 설정합니다(스크롤하지 않음):
document.body.style.backgroundAttachment = "fixed";
예시
배경 이미지의 위치를 변경합니다.
document.body.style.backgroundPosition = "top right";
예시
문서의 배경 속성 값을 반환합니다.
document.body.style.background;
관련 페이지
CSS 튜토리얼: CSS 배경
CSS3 튜토리얼: CSS3 배경
CSS 참조: 배경 속성