CSS 배경 요약

CSS background - 요약 속성

코드를 줄이기 위해 모든 배경 속성을 하나의 속성에 지정할 수 있습니다. 이를 요약 속성이라고 합니다.

이렇게 쓰지 않고도

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

요약 속성을 사용하여 background:

예제

배경 속성을 한 줄의 표현으로 설정하는 요약 속성을 사용하여 배경 속성을 설정합니다:

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

직접 테스트해 보세요

요약 속성을 사용할 때, 속성 값의 순서는 다음과 같습니다:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

하나의 속성 값이 누락되어도 상관없습니다. 다른 값을 이 순서로 설정하면 됩니다. 주의할 것은, 위의 예제에서 background-attachment 속성을 사용하지 않았기 때문에 값이 없다는 점입니다.

모든 CSS 배경 속성

속성 설명
background 모든 배경 속성을 한 줄의 표현으로 설정하는 요약 속성을 설정합니다.
background-attachment 배경 이미지가 고정되어 있는지, 페이지의 나머지 부분과 함께 스크롤되는지 설정합니다.
background-clip 배경을 그릴 영역을 정의합니다.
background-color 요소의 배경색을 설정합니다.
background-image 요소의 배경 이미지를 설정합니다.
background-origin 배경 이미지를 어디에 배치할 것인가를 정의합니다.
background-position 배경 이미지의 시작 위치를 설정합니다.
background-repeat 배경 이미지가 얼마나 반복되고 어떻게 반복되는지 설정합니다.
background-size 배경 이미지의 크기를 정의합니다.