스타일 배경 속성

정의와 사용법

background 속성은 단축 형식으로 설정하거나 최대 8개의 단일 배경 속성을 반환합니다.

이 속성을 통해 다음 중 하나 또는 여러 가지를 설정/반환할 수 있습니다.:

DOM 속성 CSS 속성
backgroundAttachment 배경 연결
배경 Clippers background-clip
배경색 배경색
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

위 속성은 별도의 스타일 속성을 사용하여도 설정할 수 있습니다. 고급 작성자가 아닌 경우 더 나은 제어를 위해 별도의 속성을 사용하는 것을 강력히 권장합니다.

다른 것도 참조하십시오:

CSS 강의:CSS 배경

CSS3 강의:CSS3 배경

CSS 참조 매뉴얼:background 속성

예제

문서 배경의 스타일을 설정합니다:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

직접 시도해 보세요

페이지 아래에 더 많은 TIY 예제가 있습니다.

문법

background 속성을 반환합니다:

object.style.background

background 속성을 설정합니다:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

속성 값

값 설명
color 요소의 배경 색상을 설정합니다.
image 요소의 배경 이미지를 설정합니다.
repeat 배경 이미지의 반복 방식을 설정합니다.
attachment 배경 이미지가 고정되었는지 페이지 스크롤에 따라 움직이는지 설정합니다.
position 배경 이미지의 시작 위치를 설정합니다.
size 배경 이미지의 크기를 설정합니다.
origin 배경 정위치 영역을 설정합니다.
clip 배경 이미지의 그리기 영역을 설정합니다.
initial 이 속성을 기본 값으로 설정합니다. 참조하십시오 initial.
inherit 이 속성을 부모 요소에서 상속합니다. 참조하십시오 inherit.

기술 세부 사항

기본 값: 투명, 없음, 반복, 스크롤, 0% 0%, 자동, 패딩 박스, 박스 박스
반환 값: 문자열, 요소의 배경을 나타냅니다.
CSS 버전: CSS1 + CSS3에서 새로운 속성

더 많은 예제

예제 2

배경을 변경하십시오 DIV 요소:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

직접 시도해 보세요

예제 3

문서에 배경 색상을 설정합니다:

document.body.style.backgroundColor = "red";

직접 시도해 보세요

예제 4

문서에 배경 이미지를 설정합니다:

document.body.style.backgroundImage = "url('img_tree.png')";

직접 시도해 보세요

예제 5

배경 이미지를 반복하지 않게 설정합니다:

document.body.style.backgroundRepeat = "repeat-y";

직접 시도해 보세요

예제 6

배경 이미지를 고정으로 설정합니다(스크롤되지 않습니다):

document.body.style.backgroundAttachment = "fixed";

직접 시도해 보세요

예제 7

배경 이미지의 위치를 변경합니다:

document.body.style.backgroundPosition = "top right";

직접 시도해 보세요

예제 8

문서의 배경 속성 값을 반환합니다:

document.body.style.background;

직접 시도해 보세요

브라우저 지원

background CSS1 (1996) 특성입니다.

모든 브라우저는 완전히 지원합니다:

크롬 에지 파이어폭스 사파리 오페라 IE
크롬 에지 파이어폭스 사파리 오페라 IE
지원 지원 지원 지원 지원 지원

주석

CSS3 (1999)에 세 가지 새로운 속성이 추가되었습니다: