CSS background 속성 과 이미지

background

background 속성은 HTML 요소의 배경을 설정하는 데 사용됩니다. 이 속성은 여러 개의 개별 속성을 축약하여 사용할 수 있습니다.

개별 속성

1. background-color

배경 색상을 설정합니다.

• 색상 이름: red, blue, green 등.
• 16진수 색상: #ff0000 (빨강), #00ff00 (초록).
• RGB/rgba: rgb(255, 0, 0) 또는 rgba(255, 0, 0, 0.5) (반투명 빨강).
• HSL/hsla: hsl(0, 100%, 50%), hsla(0, 100%, 50%, 0.5).

2. background-image

배경에 사용할 이미지를 지정합니다.

• URL: url('image.jpg'), url('https://example.com/image.png').
• 선형 그라디언트: linear-gradient(to right, red, yellow).
• 방사형 그라디언트: radial-gradient(circle, red, blue).
• 없음: none (기본값).

3. background-position

배경 이미지가 위치하는 지점을 설정합니다.

• 하나만 사용: top, center, bottom, left, right.
• 두 개 조합: top left, center center, bottom right.
• center top (중앙 정렬 + 위쪽).
• right 10px bottom 20px (오른쪽에서 10px, 아래쪽에서 20px).

4. background-size

배경 이미지의 크기를 설정합니다.

• auto: 원본 크기 유지.
• cover: 배경을 요소 전체에 맞추되 비율 유지.
• center top (중앙 정렬 + 위쪽).
• contain: 비율을 유지하며 요소 안에 맞춤.
• 백분율/픽셀: 100% 50%, 200px 100px.
• 한 축만 설정: 100% auto (너비는 100%, 높이는 자동 조정).

6. background-attachment

배경 이미지의 스크롤 동작을 설정합니다.

• scroll: 기본값, 배경이 콘텐츠와 함께 스크롤.
• fixed: 배경이 화면에 고정.
• local: 배경이 스크롤 가능한 요소와 함께 이동.

7. background-clip

배경이 그려지는 영역의 경계를 설정합니다.

• border-box: 기본값, 테두리까지 배경이 표시.
• padding-box: 테두리는 제외하고 패딩 영역까지 배경 표시.
• content-box: 패딩 영역을 제외하고 콘텐츠 영역만 배경 표시.

8. background-origin

배경 이미지가 시작되는 기준점을 설정합니다.

• padding-box: 기본값, 패딩 영역 기준.
• border-box: 테두리 영역 기준.
• content-box: 콘텐츠 영역 기준.

9. background-image-gradient (옵션)

선형 그라디언트

background-image: linear-gradient(direction, color1, color2, ...);

• 방향: to right, to bottom left (방향 지정).
• 각도 사용: 45deg (45도).
• 색상: red, yellow, green.

방사형 그라디언트

background-image: radial-gradient(shape, color1, color2, ...);

• 모양:circle (원형), ellipse (타원형). 예: radial-gradient(circle, red, yellow, green).

반복 그라디언트

background-image: repeating-linear-gradient(...);

background 축약 속성

background: [background-color] [background-image] [background-position] / [background-size] [background-repeat] [background-attachment] [background-origin];

기본값

• background-color: transparent
• background-image: none
• background-position: 0% 0%
• background-size: auto
• background-repeat: repeat
• background-attachment: scroll
• background-origin: padding-box
• background-clip: border-box
  background 속성을 사용할 때 필요한 부분만 정의하고, 나머지는 기본값으로 설정할 수 있어 매우 유연하게 사용 가능합니다.