배경 속성

background-color: 요소의 배경 색상

• transparent: 투명함(기본)
• 색상: 지정 가능한 색상

background-image: 요소의 배경 이미지 삽입

• none: 이미지 없음 (기본)
• url("경로"): 이미지 경로

background-repeat: 요소의 배경 이미지 반복

• repeat: 이미지를 수직, 수평 반복(기본)
• repeat-x: 이미지를 수평 반복
• repeat-y: 이미지를 수직 반복
• no-repeat: 반복 없음

background-position: 요소의 배경 이미지 위치

• 0% 0%: 0% ~ 100% 사이의 값(기본)
• 방향: top, bottom, left, right, center 방향 (예)top right
• 단위: px, em, rem 등 단위로 지정(x축 y축)

backgroud-size: 요소의 배경 이미지 크기

• auto: 이미지의 실제 크기(기본)
• 단위: px, em, rem 등 단위로 지정
• cover: 비율을 유지, 요소의 더 넓은 너비에 맞춤
• contain: 비율을 유지, 요소의 더 짧은 너비에 맞춤

background-attachment: 요소의 배경 이미지 스크롤 특성

• scroll: 이미지가 요소를 따라서 같이 스크롤(기본)
• fixed: 이미지가 뷰포트에 고정, 스크롤 x
• local: 요소 내 스크롤 시 이미지가 같이 스크롤

예제

<div></div>

body {
  height: 3000px;
}
div {
  width: 200px;
  height: 200px;
  background-color: orange;
  background-image: url("https://i2.wp.com/assets.codepen.io/internal/avatars/users/default.png?ssl=1");
  background-size: 100px;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: scroll;
}