[기초]CSS 배경 스타일(background)

CSS에서 배경 스타일을 설정하는 속성들은 요소의 배경을 이미지나 색상으로 꾸미고, 이를 다양한 방식으로 조정하는 데 사용됩니다.

 

배경 스타일 속성

1. 배경 색상 (background-color)

• 요소의 배경 색상을 지정합니다.

div {
  background-color: #f0f0f0; /* HEX 색상 */
  background-color: rgb(240, 240, 240); /* RGB 색상 */
  background-color: rgba(240, 240, 240, 0.8); /* RGBa 색상 */
  background-color: hsl(0, 0%, 94%); /* HSL 색상 */
}

 

 

2. 배경 이미지 (background-image)

• 요소의 배경 이미지를 지정합니다.

div {
  background-image: url('background.jpg');
}

 

 

3. 배경 반복 (background-repeat)

• 배경 이미지의 반복 방식을 지정합니다.
• 가능한 값: repeat, repeat-x, repeat-y, no-repeat, space, round

div {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

 

 

4. 배경 위치 (background-position)

• 배경 이미지의 시작 위치를 지정합니다.
• 가능한 값: left, right, top, bottom, center 및 좌표 값(px, %, em 등)

div {
  background-image: url('background.jpg');
  background-position: center center;
}

 

 

5. 배경 첨부 (background-attachment)

• 배경 이미지의 스크롤 동작을 지정합니다.
• 가능한 값: scroll, fixed, local

div {
  background-image: url('background.jpg');
  background-attachment: fixed;
}

 

 

6. 배경 크기 (background-size)

• 배경 이미지의 크기를 지정합니다.
• 가능한 값: auto, cover, contain, 특정 너비와 높이(px, %, em 등)

div {
  background-image: url('background.jpg');
  background-size: cover;
}

 

 

7. 배경 원점 (background-origin)

• 배경 이미지의 배경 영역의 시작점을 지정합니다.
• 가능한 값: padding-box, border-box, content-box

div {
  background-image: url('background.jpg');
  background-origin: border-box;
}

 

 

8. 배경 클립 (background-clip)

• 배경 색상이나 이미지의 표시 영역을 지정합니다.
• 가능한 값: border-box, padding-box, content-box

div {
  background-clip: border-box;
}

div {
  background-clip: padding-box;
}

div {
  background-clip: content-box;
}

 

 

9. 단축 속성 (background)

• 여러 배경 속성을 한 번에 지정할 수 있는 단축 속성입니다.
• 모든 개별 속성이 포함될 필요는 없으며, 필요한 속성만 포함할 수 있다.
• 값: background-color, background-image, background-repeat, background-attachment, background-position, background-size(단, background-position과 background-size가 함께 사용될 때, 이 두 속성 사이에 슬래시(/)가 필요)

div {
  background: #f0f0f0 url('background.jpg') no-repeat fixed center / cover;
}