CSS background 속성

정의와 사용법

background 간추진 속성은 하나의 선언에서 모든 배경 속성을 설정합니다.

다음과 같은 속성을 설정할 수 있습니다:

값을 설정하지 않으면 문제가 발생하지 않습니다. 예를 들어, background:#ff0000 url('smiley.gif');도 허용됩니다.

보통 이 속성을 사용하는 것이 좋습니다. 각각의 속성을 사용하는 것보다 이 속성이 오래된 브라우저에서 더 잘 지원되며, 입력해야 할 문자도 덜합니다.

다른 것을 참조하세요:

CSS 강의:CSS 배경、CSS 배경(고급)

HTML DOM 참조 문서:background 속성

예제

모든 배경 속성을 하나의 선언으로 설정하는 방법:

body
  { 
  background: #00FF00 url(bgimage.gif) no-repeat fixed top;
  }

본인이 직접 시도해보세요

CSS 문법

background: bg-color bg-image 위치/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

속성 값

값 설명 CSS
background-color 사용할 배경 색상을 지정합니다. 1
background-position 배경 이미지의 위치를 지정합니다. 1
background-size 배경 이미지의 크기를 지정합니다. 3
background-repeat 배경 이미지를 어떻게 반복할지 지정합니다. 1
background-origin 배경 이미지의 위치를 지정합니다. 3
background-clip 배경을 그리는 영역을 지정합니다. 3
background-attachment 배경 이미지가 고정되거나 페이지의 나머지 부분과 함께 스크롤되는지 지정합니다. 1
background-image 사용할 배경 이미지를 지정합니다. 1
inherit 부모 요소에서 background 속성 설정을 상속해야 합니다. 1

기술 세부 사항

기본 값: not specified
thừa kế: no
버전: CSS1 + CSS3
JavaScript 문법: object.style.background="white url(paper.gif) repeat-y"

브라우저 지원

표에서 언급된 숫자는 이 속성을 최초로 완전히 지원한 브라우저 버전을 나타냅니다.

크롬 에지 파이어폭스 사파리 오페라
크롬 에지 파이어폭스 사파리 오페라
1.0 4.0 1.0 1.0 3.5