CSS 강좌 / 배경색과 배경 이미지 설정하기

CSS에서 배경색은 background-color, 배경 이미지는 background-image로 지정합니다. 이미지를 배경 영역에 꽉 채우려면 cover, 전체 그림을 잘리지 않게 넣으려면 contain을 사용하며, 반복 여부와 위치는 별도로 정합니다. 이미지와 상자의 가로세로 비율이 다를 때 두 크기 설정의 차이가 분명해집니다.

배경색과 배경 이미지는 어떤 역할일까요?

배경색은 이미지가 없는 곳과 투명한 부분 뒤에 보입니다. 이미지가 불러와지지 않을 때도 배경색은 남길 수 있습니다. 배경 이미지 자체는 요소의 내용이 아니며 요소 높이를 자동으로 만들어 주지 않습니다. 비어 있는 div에 이미지 URL만 넣고 높이를 지정하지 않으면 표시할 영역이 없을 수 있습니다.

.sample {
  height: 300px;
  background-color: #e8e8e8;
  background-image: url("images/landscape.webp");
}

본문의 사진·설명 도표처럼 이미지 자체가 정보를 전달하면 HTML의 img와 대체 텍스트를 사용하는 편이 적합합니다. CSS 배경에는 alt 속성을 직접 붙일 수 없습니다. 이 강의의 빈 실습 상자에는 비교 결과를 설명하는 접근성 이름을 넣지만, 장식 배경을 실제 서비스에서 사용할 때마다 역할을 추가할 필요는 없습니다. 중요한 설명문을 배경 이미지에만 넣지 마세요.

실습 이미지와 폴더 준비하기

아래 600×400 실습용 배경 이미지를 열어 landscape.webp라는 이름으로 저장합니다. 좌우의 나무와 가운데 원을 비교 대상으로 사용합니다. 3:2 비율의 그림을 정사각형 상자에 넣으므로 어느 부분이 잘리는지 확인하기 쉽습니다.

background-practice/
  backgrounds.html
  images/
    landscape.webp

전체 예제의 style은 HTML 파일 안에 있으므로 images/landscape.webp는 backgrounds.html을 기준으로 찾습니다. CSS를 별도의 css/style.css로 옮기면 같은 그림의 상대 경로는 ../images/landscape.webp가 됩니다. 별도 CSS 파일의 상대 URL은 HTML 파일이 아니라 CSS 파일을 기준으로 해석됩니다. 대소문자와 확장자도 정확히 맞추세요. 경로 규칙은 MDN의 background-image 설명를 참고하세요.

cover와 contain을 같은 이미지로 비교하기

위 계산은 테두리와 padding이 없는 300×300 배경 영역, background-position: center, background-repeat: no-repeat를 전제로 합니다. cover는 빈 공간 없이 채우는 대신 일부를 잘라내고, contain은 전체 그림을 보이는 대신 비율이 맞지 않는 부분에 배경색을 남깁니다. 비율이 이미 같은 경우에는 둘의 차이가 보이지 않을 수 있습니다. 크기 계산과 조건은 MDN의 background-size 설명에서 확인할 수 있습니다.

다음은 전체 예제의 두 배경을 같은 크기로 표시한 결과입니다. cover에서는 좌우 끝 나무 일부가 잘리고, contain에서는 그림 전체와 위아래의 회색 배경이 보입니다.

고유한 크기와 비율이 없는 CSS 그라데이션만으로 cover·contain을 비교하면 같은 영역을 채워 차이가 거의 보이지 않습니다. 잘림 실습에는 지금처럼 크기와 비율이 정해진 이미지 파일을 사용하세요.

반복과 위치는 크기와 별개로 설정합니다

.repeat {
  background-size: 100px auto;
  background-repeat: repeat;
  background-position: left top;
}
.no-repeat {
  background-size: 100px auto;
  background-repeat: no-repeat;
  background-position: left top;
}

background-size: 100px auto는 너비를 100px로 하고 높이는 원래 비율에 맞춥니다. repeat는 작은 그림을 배경 영역에 반복해서 채우고, no-repeat는 한 번만 표시합니다. 기본 반복 때문에 contain의 빈 공간에도 그림이 반복될 수 있으므로 전체 그림 한 장을 비교할 때는 no-repeat를 함께 지정하세요.

background-position은 이미지의 배치 기준을 정합니다. center는 남는 공간이나 잘리는 부분을 양쪽에 나누고, left top은 왼쪽 위를 기준으로 맞춥니다. cover에서 위치를 바꾸면 크기가 달라지는 것이 아니라 잘리는 쪽이 달라집니다. 예제는 속성을 따로 쓰므로 나중에 background 단축 속성을 추가해 다른 설정을 초기화하지 않도록 주의하세요.

복사해서 실행하는 전체 예제

앞서 준비한 폴더의 backgrounds.html에 아래 코드를 UTF-8로 저장하고 엽니다. 네 상자에 같은 그림을 사용해 크기와 반복 여부를 비교합니다. 창이 좁으면 상자 너비는 줄어들고 높이는 300px을 유지하므로 잘림과 빈 공간의 크기도 다시 계산됩니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>배경 이미지 크기 비교</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 24px; color: #333; font: 1rem/1.7 sans-serif; }
    .sample { width: 100%; max-width: 300px; height: 300px; margin-block-end: 24px;
      background-color: #e8e8e8; background-image: url("images/landscape.webp");
      background-position: center; background-repeat: no-repeat; }
    .cover { background-size: cover; }
    .contain { background-size: contain; }
    .repeat { background-size: 100px auto; background-repeat: repeat; background-position: left top; }
    .no-repeat { background-size: 100px auto; background-position: left top; }
  </style>
</head>
<body>
  <h1>배경 이미지 비교</h1>
  <h2>cover：상자를 채움</h2><div class="sample cover" role="img" aria-label="좌우가 잘린 배경"></div>
  <h2>contain：그림 전체를 넣음</h2><div class="sample contain" role="img" aria-label="위아래 빈 공간이 있는 배경"></div>
  <h2>repeat：작게 반복</h2><div class="sample repeat" role="img" aria-label="작은 그림을 반복한 배경"></div>
  <h2>no-repeat：작게 한 번 표시</h2><div class="sample no-repeat" role="img" aria-label="왼쪽 위에 한 장만 표시한 배경"></div>
</body>
</html>

한 속성씩 바꾸어 확인하기

1. 창을 충분히 넓게 해서 첫 두 상자가 300×300인지 개발자 도구에서 확인합니다. cover의 좌우 잘림과 contain의 위아래 공간을 비교합니다.
2. cover의 background-position만 left top으로 바꿉니다. 왼쪽 나무가 더 보이고 오른쪽이 더 잘리는지 확인한 뒤 center로 되돌립니다.
3. contain의 background-repeat를 repeat로 바꿉니다. 빈 공간에 그림 일부가 반복되는지 확인하고 no-repeat로 되돌립니다.
4. .no-repeat의 크기를 100px auto에서 100% 100%로 바꿉니다. 가운데 원의 비율이 달라지는지 확인하고 원래 값으로 되돌립니다.

그림이 안 보이거나 예상과 다를 때

• 실습 이미지 링크를 직접 열어 원본 파일이 보이는지 확인합니다. 저장한 파일명과 실제 확장자를 점검하고 HTML·CSS 위치에 맞게 경로를 계산하세요.
• 개발자 도구의 Network에서 이미지 요청을 확인합니다. 404라면 경로, 응답은 정상인데 안 보이면 상자의 너비·높이와 background-image 적용 규칙을 확인합니다.
• 빈 공간 없이 채워지기를 원하면 cover인지 확인합니다. 그림 전체를 보이려면 contain과 no-repeat를 함께 지정합니다. 그림 비율이 상자와 같으면 두 값의 차이가 작습니다.
• 글자 뒤에 배경을 넣는 경우 밝고 어두운 부분 모두에서 글자가 읽히는지 확인합니다. 이 강의에서는 그림 비교가 목적이므로 설명문을 상자 밖에 배치했습니다.

배경 이미지를 억지로 늘려 넣기 전에 “전체가 보여야 하는 그림인가, 일부를 잘라도 되는 장식인가”를 결정하세요. 상품 사진이나 설명 도표처럼 전체 내용이 필요한 이미지와 장식 배경은 같은 기준으로 처리하지 않는 것이 좋습니다.