• 목록

CSS background 속성
 

background 속성은 요소의 배경 효과를 제어하는 단축 속성이자, 여러 개별 속성을 포함하는 핵심 디자인 도구입니다. 색상, 이미지, 반복 여부 및 위치를 상세히 설정할 수 있습니다.

1. 배경 설정의 기초 (개별 속성)

• background-color: 배경색을 지정합니다. (Hex, RGB, HSL 등)

• background-image: 배경 이미지를 설정하며, url() 경로를 사용합니다. 쉼표로 구분해 여러 장을 겹칠 수 있습니다.

• background-repeat: 이미지 반복 방식을 결정합니다. (repeat, no-repeat, repeat-x, repeat-y)

• background-position: 배경 이미지의 시작 좌표를 설정합니다. (center, top, left, %, px 등)

• background-size: 이미지 크기를 조절합니다.

  • cover: 비율을 유지하며 요소를 꽉 채웁니다.

  • contain: 비율을 유지하며 이미지 전체가 다 보이도록 맞춥니다.

• background-attachment: 스크롤 시 배경의 움직임을 제어합니다. (fixed, scroll, local)

• background-origin: 배경 이미지가 시작되는 기준점(Box 모델 기준)을 정합니다.

2. background-clip (배경 노출 범위)

배경이 박스 모델의 어느 단계까지 그려질지 결정하는 속성입니다.

• border-box: 테두리(Border) 영역까지 포함하여 배경이 나타납니다. (기본값)

• padding-box: 테두리를 제외하고 안쪽 여백(Padding)까지만 배경이 나타납니다.

• content-box: 안쪽 여백을 제외하고 실제 콘텐츠(Content) 영역에만 배경이 나타납니다.

• text: 배경이 텍스트의 형태에 맞춰 잘립니다. color: transparent와 함께 사용하여 글자 안에 배경(이미지/그라데이션)을 넣을 때 사용합니다.

 

• 목록