CSS Background 요약 정리

CSS Study Note

Background

요소에 배경 색상과 이미지를 자유자재로 다루기

01 — 개별 속성 6가지

background-color

기본값: transparent

배경 색상을 지정합니다. 이미지와 함께 쓸 때 이미지 뒤에 깔립니다.

red rgb() #hex transparent

background-image

기본값: none

배경 이미지를 지정합니다. 스크린리더가 읽지 못하므로 의미 있는 이미지는 img 태그를 사용해야 합니다.

background-image: url(img/cat1.jpg);

background-repeat

기본값: repeat

이미지 반복 방식을 설정합니다.

repeat no-repeat repeat-x repeat-y

background-position

기본값: left top

이미지 시작 위치를 지정합니다. 가로 세로 순서로 작성.
마이너스 값도 사용 가능하고, 50% 50% = center center 와 동일합니다.

left top center center 50% 50% 20px 10px -10px 0

background-attachment

기본값: scroll

스크롤 시 배경 이미지 고정 여부를 설정합니다.
fixed: 뷰포트 고정 — 패럴랙스 효과에 활용
scroll: 요소와 함께 스크롤 (기본)

scroll fixed

background-size

기본값: auto

배경 이미지 크기를 설정합니다. 축약형 사용 시 position과 / 로 함께 써야 합니다.

auto cover contain 100% 60px

02 — 축약형 작성법

background: [순서대로 작성]

color · url() · repeat · attachment · position / size

/* 전체 축약 예시 */ background: red url(img/figma_logo.svg) repeat-x fixed left top / auto; /* 생략 가능한 속성 제거 — 실무에서 자주 쓰는 형태 */ background: url(img/cat1.jpg) no-repeat center / cover; /* 원형 아이콘 배경 */ background: rgb(168,142,211) url(img/figma_logo.svg) no-repeat center / 60px;

size는 position 뒤에 / 로 연결 — position 없이 size만 쓸 수 없음

기본값인 속성은 생략 가능 — repeat, scroll, transparent 등

color와 image는 같이 써도 됨 — 이미지가 color 위에 렌더링됨

03 — background-size 상세

auto

이미지 원본 크기 그대로 표시. 기본값.

cover

요소를 빈틈 없이 꽉 채움. 비율 유지, 잘릴 수 있음. 배경 이미지에 가장 많이 사용.

contain

이미지 전체가 보이도록 맞춤. 비율 유지, 여백 생길 수 있음.

100%

요소 가로폭 기준 비율로 크기 조절. 세로는 자동.

60px

px 단위로 직접 지정. 아이콘 배경에 자주 사용.

⚠️ 주의

축약형에서 size를 쓸 때는
position / size
반드시 position과 / 로 세트로 작성해야 함.

04 — position & attachment

background-position

이미지 시작 위치. 가로 세로 순서로 작성.

키워드: left / center / right
키워드: top / center / bottom
퍼센트: 0% ~ 100% (마이너스 가능)
단위: px 단위 직접 지정 가능

50% 50% = center center 동일

background-position: center center; background-position: 50% 50%; background-position: 20px -10px;

background-attachment

스크롤 시 배경 동작 방식.

scroll (기본): 요소와 함께 스크롤됨

fixed: 뷰포트 기준으로 고정.
스크롤해도 배경이 움직이지 않아
패럴랙스 효과를 낼 수 있음

background-attachment: scroll; /* 기본 */ background-attachment: fixed; /* 고정 */

05 — 실무 활용 예시

이미지 div 배경

div { width: 500px; height: 500px; background: url(img/cat1.jpg) no-repeat center / cover; }

원형 아이콘 배경

.icon { width: 120px; height: 120px; border-radius: 50%; background: rgb(168,142,211) url(img/logo.svg) no-repeat center / 60px; }

패럴랙스 배경

body { height: 200vh; background: url(img/bg.jpg) no-repeat fixed center / cover; }

가로 반복 패턴

body { background: url(img/pattern.svg) repeat-x fixed left top / auto; }

06 — 한눈에 비교

속성	기본값	주요 값
background-color	transparent	red · rgb() · #hex
background-image	none	url(경로)
background-repeat	repeat	no-repeat · repeat-x · repeat-y
background-position	left top	center · 50% 50% · px · 마이너스 가능
background-attachment	scroll	fixed (패럴랙스)
background-size	auto	cover · contain · % · px

♿

배경 이미지는 스크린리더가 읽지 못합니다.
의미 있는 이미지(로고, 제품 사진 등)는 반드시 <img> 태그로 넣고 alt를 작성해야 합니다.
background-image는 순수하게 장식용 이미지에만 사용하세요.

🎯 핵심 포인트

size는 position과 / 세트

cover가 가장 자주 쓰임

fixed로 패럴랙스 효과

장식용일 때만 background-image

color + image 같이 사용 가능