[CSS] background 속성

background

background-image

• 요소의 배경으로 사용할 이미지 URL을 지정
• 기본값: none (배경 이미지 없음)

---

background-repeat

• 배경 이미지를 반복할지 여부와 방향을 설정
• 기본값: repeat (가로, 세로 모두 반복)

속성값	설명
repeat	가로, 세로 모두 반복 - 이미지를 원래 크기로 반복, 여분 공간이 남으면 그냥 빈 공간 남음 (간격 없음)
repeat-x	가로 방향으로만 반복
repeat-y	세로 방향으로만 반복
no-repeat	반복하지 않음
round	- 이미지 크기 조절해서 반복 (간격 없이 꽉 채움) - 이미지 크기 : 원래 크기와 달라질 수 있음 (늘어나거나 줄어듦) - 이미지 사이 간격 : 없음 - 이미지 반복 개수 : 반복 횟수 맞춤 - 여분 공간 처리 : 이미지 크기를 반복 횟수에 맞게 조절
space	- 이미지 간 간격 띄워서 반복 (빈 공간을 이미지 사이 간격으로 분배) - 이미지 크기 : 원래 크기 유지 - 이미지 사이 간격 : 일정 간격 발생 - 이미지 반복 개수 : 가능한 최대 반복 - 여분 공간 처리 : 이미지 사이 간격으로 균등 분배

 

background-repeat - CSS | MDN

---

background-position

• 배경 이미지가 요소 내에서 위치할 좌표를 지정
• 기본값: 0% 0% (왼쪽 위)

속성값 예	설명
left top	왼쪽 상단
center center	중앙
right bottom	오른쪽 하단
50% 50%	중앙 (백분율 좌표)
20px 10px	왼쪽에서 20px, 위에서 10px 떨어진 위치

---

background-size

• 배경 이미지의 크기를 조절
• 기본값: auto (원본 이미지 크기 유지)

속성값	설명
auto	이미지 원본 크기 유지
cover	요소를 완전히 덮도록 이미지 확대/축소
contain	이미지가 요소 안에 완전히 보이도록 축소
width height	직접 크기를 px, %, rem 등으로 지정 가능

---

background-attachment

• 배경 이미지가 스크롤에 따라 움직이는지 고정되는지 결정

속성값	설명
scroll (기본값)	스크롤 시 배경 이미지도 같이 움직임
fixed	배경 이미지가 화면에 고정됨
local	요소 내의 스크롤에 따라 배경이 움직임

 

background-attachment - CSS | MDN

 

---

background-origin

• 배경 이미지의 위치 기준 영역을 지정

속성값	설명
border-box	보더 영역을 기준으로 위치 지정
padding-box (기본값)	패딩 영역을 기준으로 위치 지정
content-box	콘텐츠 영역을 기준으로 위치 지정

 

background-origin - CSS | MDN

 

---

background-clip

• 배경 이미지가 보이는 영역의 범위를 지정
• 기본값: border-box (일부 브라우저 기본값 다를 수 있음)

속성값	설명
border-box	보더 영역까지 배경 표시
padding-box	패딩 영역까지만 배경 표시
content-box	콘텐츠 영역까지만 배경 표시

 

background-clip - CSS | MDN

 

---

background-color

• 설명: 배경 이미지 뒤에 깔릴 배경 색상을 지정
• 기본값: transparent

---

background (축약형)

• 배경 관련 속성들을 한 줄에 축약해서 쓸 수 있는 속성
• background-position 과 background-size 는 / 슬래시로 구분해서 써야 함
• background-origin 과 background-clip 은 보통 두 개를 같이 쓰는데, 이때는 구분자로 공백을 씀
  예: padding-box border-box
• 축약형을 쓸 때는 누락된 속성은 기본값으로 처리됨.

축약형 속성 작성 권장 순서

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

background: #f0f0f0 url('image.jpg') center/cover no-repeat fixed padding-box border-box;