한 줄 요약 — 배경은 background-color로 단색을, background-image로 이미지나 그라데이션을 깐다. 큰 이미지는 no-repeat와 background-size: cover로 채우고, 그라데이션은 linear-gradient(방향, 색1, 색2)로 만든다.

학습 목표

  • background-color로 단색 배경을 지정할 수 있다.
  • background-image와 cover/contain으로 배경 이미지를 원하는 크기로 채울 수 있다.
  • linear-gradient와 radial-gradient로 CSS 그라데이션을 만들 수 있다.
  • background 단축 속성의 순서를 이해하고 쓸 수 있다.

오늘의 비유 — 벽지를 고르는 일

방 벽을 꾸민다고 떠올려 보자. 가장 단순한 건 한 가지 색으로 칠한 무지 벽지다. 무늬가 들어간 그림 벽지를 바를 수도 있고, 위에서 아래로 색이 서서히 변하는 그라데이션 벽지를 고를 수도 있다. CSS의 배경도 똑같다. 단색 한 장(background-color), 이미지 한 장(background-image), 그리고 색이 번지는 그라데이션 — 이 셋 중 무엇을 벽에 바를지 고르는 일이다.

벽지는 색만 정하면 끝이 아니다. 벽 크기에 맞춰 자를지, 무늬를 반복할지, 어디에 맞춰 붙일지를 정해야 한다. 배경 이미지도 똑같이 background-size, background-repeat, background-position으로 이 세 가지를 정한다.

핵심 개념

단색 배경 — background-color

가장 단순한 배경이다. 색은 17회차에서 다룬 hex/rgb/hsl을 그대로 쓴다.

.box {
  background-color: #f3f4f6;
}

배경 이미지 — 크기·반복·위치

.hero {
  background-image: url("hero.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

background-image로 이미지를 깔면 기본값은 좌상단부터 무늬가 반복(repeat)된다. 작은 무늬를 타일처럼 깔 때는 이 반복이 유용하지만, 큰 사진 한 장을 깔 때는 no-repeat로 끈다.

background-size의 cover와 contain은 벽지를 벽에 맞추는 두 방식이다.

  • cover: 빈틈없이 영역을 꽉 채운다. 비율을 유지하느라 가장자리가 잘릴 수 있다.
  • contain: 이미지 전체가 다 보이게 맞춘다. 비율 때문에 옆에 빈 공간이 남을 수 있다.

벽지로 치면 cover는 "벽을 빈틈없이 덮되 가장자리가 좀 잘려도 괜찮다", contain은 "무늬 한 장이 통째로 다 보이게 붙이되 옆에 빈 벽이 남아도 괜찮다"는 차이다. 히어로처럼 꽉 차야 하는 배경은 보통 cover가 무난하다.

그라데이션 — linear-gradient

그라데이션도 사실은 background-image의 한 종류다. 이미지 파일 대신 CSS가 직접 그려주는 그림이다.

.box {
  background-image: linear-gradient(to right, #6366f1, #ec4899);
}

to right는 왼쪽에서 오른쪽으로 색이 변한다는 뜻이다. 방향은 to top, to bottom, to right처럼 키워드로 쓰거나 각도(45deg)로 줄 수 있다. 원형으로 번지게 하려면 radial-gradient를 쓴다.

.box {
  background-image: radial-gradient(circle, #fde68a, #f59e0b);
}

background 단축 속성

여러 배경 속성을 한 줄로 묶을 수 있다.

.hero {
  background: #fff url("hero.jpg") no-repeat center / cover;
}

순서가 헷갈리기 쉬운데, 크기는 위치 뒤에 슬래시(/)로 붙인다는 것만 기억하면 된다. center / cover는 "가운데 정렬, 크기는 cover"라는 뜻이다.

함께 따라하기

히어로 섹션을 그라데이션 배경으로 만들어 보자.

<section class="hero">
  <h1>배경 한 줄로 분위기 바꾸기</h1>
</section>

.hero {
  height: 320px;
  background: linear-gradient(135deg, #6366f1, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

저장하고 브라우저로 열어보면 왼쪽 위 보라색에서 오른쪽 아래 분홍색으로 번지는 배경 가운데에 흰 제목이 놓인 히어로 영역이 보인다. 두 색 #6366f1과 #ec4899만 바꿔도 분위기가 통째로 달라진다.

여기에 배경 이미지를 한 겹 더 얹고 싶다면 콤마로 배경을 쌓는다. 먼저 적은 것이 위에 온다.

.hero {
  background:
    linear-gradient(rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.4)),
    url("photo.jpg") no-repeat center / cover;
}

반투명 검정 그라데이션을 사진 위에 한 겹 덮어 글자가 잘 보이게 만드는, 자주 쓰는 기법이다.

흔한 실수 3가지

1. background-size의 cover와 contain을 헷갈린다

"이미지가 잘려요" 또는 "옆에 빈 공간이 생겨요"는 대부분 이 둘을 바꿔 쓴 경우다.

/* (이미지 전체를 보여주려 했는데 잘립니다) */
.hero {
  background-size: cover;
}

cover는 영역을 꽉 채우느라 잘린다. 이미지 전체가 다 보여야 한다면 contain으로 바꾸고, 남는 여백이 반복되지 않게 no-repeat를 함께 준다.

.hero {
  background-size: contain;
  background-repeat: no-repeat;
}

2. gradient의 각도(deg) 방향을 반대로 안다

수학 시간의 각도와 달리, CSS 그라데이션의 0deg는 아래에서 위로 향한다.

/* (오른쪽으로 향할 거라 기대하지만 위로 향합니다) */
.box {
  background-image: linear-gradient(0deg, #fff, #000);
}

CSS에서 각도는 위(to top)가 0deg이고 시계 방향으로 돈다. 그래서 90deg가 오른쪽, 180deg가 아래다. 방향이 헷갈리면 각도 대신 to right 같은 키워드로 쓰는 게 안전하다.

3. 배경 이미지 url을 잘못된 경로로 쓴다

url() 안의 경로는 HTML 파일이 아니라 CSS 파일 위치를 기준으로 한다.

/* (CSS가 css/style.css에 있으면 이 경로는 어긋납니다) */
.box {
  background-image: url("images/bg.png");
}

CSS 파일이 css/ 폴더 안에 있고 이미지가 바깥 images/ 폴더에 있다면, CSS 기준으로 한 단계 위로 올라가야 한다.

.box {
  background-image: url("../images/bg.png");
}

오늘 배운 것 체크리스트

  • background-color로 단색 배경을 깐다.
  • 큰 배경 이미지는 no-repeat + cover로 채운다.
  • cover는 꽉 채우고(잘림), contain은 다 보인다(여백).
  • linear-gradient의 방향은 키워드나 각도로 정한다.

자주 묻는 질문

Q. 그라데이션을 두 개 겹치려면 어떻게 하나요?

A. background-image에 콤마로 여러 그라데이션을 나열하면 됩니다. 먼저 쓴 것이 위에 쌓이므로, 위로 오는 그라데이션은 rgb(0 0 0 / 0.4)처럼 반투명으로 줘야 아래 것이 비쳐 보입니다.

Q. 배경 이미지가 자꾸 반복되는데 어떻게 없애나요?

A. background-repeat: no-repeat를 주면 한 번만 그려집니다. 큰 사진을 깔 때는 보통 no-repeat와 background-size: cover를 함께 씁니다.

다음 시간 예고

내일은 display 속성을 다룬다. block, inline, inline-block, none이 정확히 어떻게 다른지 배운다.

더 알아보기