background 속성의 이해

background 속성은
요소의 배경 스타일을 한 번에 지정하는 단축 속성(shorthand property)입니다.

이 속성으로 색상, 이미지, 이미지의 영역과 위치 및 반복 여부 등과 같은 배경 스타일을 한 번에 지정할 수 있습니다.

CSS 데모: background 데모 버튼을 클릭해 보세요!

구성 속성

background 속성은 다음 CSS 속성들을 한 번에 지정할 수 있는 단축 속성(shorthand property)입니다.

background 속성의 구성 속성
background-attachment 요소에 적용한 배경 이미지가 어느 기준에 부착(attachment)될지를 지정합니다.
background-clip 요소의 배경(색상이나 이미지)이 어느 부분까지 차지할 지를 지정합니다.
background-color 요소의 배경 색상을 지정합니다.
background-image 요소의 배경 이미지를 지정합니다.
background-origin 요소 박스의 배경 이미지를 어느 영역을 기준으로 포지셔닝할지 설정합니다.
background-position 요소에 적용한 배경 이미지가 어디서부터 시작될지 위치를 지정합니다.
background-repeat 요소에 적용한 배경 이미지의 반복 방식을 지정합니다.
background-size 요소에 적용한 배경 이미지의 크기를 지정합니다.

background 속성의 형식은 다음과 같습니다.

형식 구문

CSS 
selector {
    background: <background-color> || 
                <background-image> || 
                <background-repeat> || 
                <background-position> / <background-size> || 
                <background-attachment> || 
                <background-origin> || 
                <background-clip>
}

구문

CSS 
/* <background-color> 사용 */
background: green; /* 배경 색상 설정 */

/* <background-image>와 <background-repeat> 사용 */
background: url("image.jpg") repeat-y; /* 배경 이미지와 세로 방향 반복 설정 */

/* <background-position>과 <background-size>는 반드시 쌍으로 있어야 함
   <background-position>이 먼저 오고, 그 다음에 <background-size>가 와야 합니다.
   그러나 다른 구성 속성들의 순서는 상관없습니다. */
background: no-repeat center / 80% url("../img/image.png"); /* <background-position>: center, <background-size>: 80% */

/* <background-position>의 두 값 예시: 수평과 수직 위치 지정 */
background: url("image.jpg") no-repeat center top;  /* 수평 'center', 수직 'top'으로 배경 위치 설정 */
background: url("image.jpg") no-repeat left bottom; /* 수평 'left', 수직 'bottom'으로 배경 위치 설정 */

/* <background-position>의 네 값 예시: 배경 이미지의 위치 및 크기 지정 */
/* 띄어쓰기는 선택적이며, 위치와 크기를 '/'로 구분 */
background: url("image.jpg") no-repeat left top / 100px 200px;  /* <background-position>: left top, <background-size>: 100px 200px */
background: url("image.jpg") no-repeat right bottom / 50% 50%;  /* <background-position>: right bottom, <background-size>: 50% 50% */

/* <background-size>의 두 값 예시: 너비와 높이 지정 */
background: url("image.jpg") no-repeat center / 50% auto;  /* 너비 50%, 높이는 자동 조정 */
background: url("image.jpg") no-repeat center / 200px 100px; /* 너비 200px, 높이 100px */

/* <background-attachment>와 <background-origin> 사용 */
background: fixed border-box url("bg.jpg"); /* 배경 고정(fixed) 및 배경의 기준(box) 설정 */

/* <background-color>와 <background-image> 사용 */
background: #f0f0f0 url("image.jpg"); /* 배경 색상과 배경 이미지 설정 */

/* 여러 속성의 조합 사용 */
background: #fff url("image.jpg") no-repeat center / cover fixed padding-box; 
/* 배경 색상, 이미지, 반복, 배경 위치, 크기, 고정, 기준 설정 */

주요 포인트 설명

구문에 관련된 주요한 형식에 대한 설명을 첨부합니다.

<background-position>과 <background-size>의 관계
  • background 속성에서 <background-position>이 먼저 오고 그 뒤에 <background-size>가 와야 합니다. 이 순서는 반드시 지켜야 합니다.
  • 두 값 예시: center top, left bottom처럼 수평 위치와 수직 위치를 각각 따로 지정할 수 있습니다. 첫 번째 값이 수평 위치, 두 번째 값이 수직 위치입니다.
  • 네 값 예시: <background-position>에 네 개의 값을 사용하여 수평 위치, 수직 위치, 크기(너비, 높이)를 동시에 지정할 수 있습니다. 예를 들어, left top / 100px 200px처럼 배경 이미지의 위치와 크기를 함께 설정하는 방식입니다. left top/100px 200px처럼 / 앞 뒤의 띄어쓰기는 없거나 있거나 동일하게 작동합니다.
구성 속성들의 순서
  • <background-position>과 <background-size>처럼 쌍으로 사용될 때 순서가 중요합니다.
  • 나머지 속성들, 예를 들어 <background-color>, <background-image>, <background-repeat> 등은 순서를 변경해도 상관없습니다.

값

background-size 속성 값
<background-color> background-color 속성 값
<background-image> background-image 속성 값
<background-repeat> background-repeat 속성 값
<background-position> background-position 속성 값
<background-size> background-size 속성 값
<background-attachment> background-attachment 속성 값
<background-origin> background-origin 속성 값
<background-clip> background-clip 속성 값

형식 정의

background 속성의 형식 정의
초깃값
적용 요소 모든 요소
상속 아니오

주의할 점

background 속성은 단축 속성(shorthand property)이기 때문에, 이 속성에 값을 새로 지정하면 기존에 지정한 개별 배경 속성들이 모두 덮어씌워집니다.

즉, background 속성을 사용하여 배경 스타일을 한 번에 지정하면, 각 구성 요소에 대해 개별적으로 설정한 값들도 초기화되어 새로운 값으로만 설정됩니다.

예제를 통해 살펴보겠습니다.

HTML 
<div></div>
CSS 
div {
    height: 200px;
    background: yellowgreen url("earth.jpg") center/cover;
}
div:hover {
    background: red;
}
실제 적용된 모습

배경 이미지와 배경 색상이 변경될 때, background 속성으로 전체를 다시 지정하면, 기존의 배경 이미지와 기존의 배경 색상 등은 초기화(초깃값으로 지정)되므로 다른 속성값이 덮어쓰여집니다.

즉, 마우스를 올리면 배경이 빨간색으로 바뀝니다. 이때 background 속성이 다시 지정되므로, 기존 배경에 설정된 이미지와 크기, 색상은 모두 초기화되고 빨간색 배경만 적용됩니다.

브라우저 호환성

background 속성의 브라우저 호환성
속성
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
background 예 예 예 예

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

background 속성의 명세서 사양
명세서 사양
background CSS Backgrounds and Borders Module Level 3
#the-background

참고문헌

같이 보기