CSS background 속성 > 웹 무료강의 | 모던DS 웹에이전시

CSS CSS background 속성

작성자 모던DS
조회 72회

CSS background 속성

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

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 모델 기준)을 정합니다.

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

border-box: 테두리(Border) 영역까지 포함하여 배경이 나타납니다. (기본값)
padding-box: 테두리를 제외하고 안쪽 여백(Padding)까지만 배경이 나타납니다.
content-box: 안쪽 여백을 제외하고 실제 콘텐츠(Content) 영역에만 배경이 나타납니다.
text: 배경이 텍스트의 형태에 맞춰 잘립니다. color: transparent와 함께 사용하여 글자 안에 배경(이미지/그라데이션)을 넣을 때 사용합니다.