CSS / Reference / background-image

background-image는 이미지 파일이나 그라디언트를 요소 배경으로 표시합니다. 배경은 요소의 의미 있는 콘텐츠를 대신하지 않으므로, 설명이 필요한 사진은 대체 텍스트를 가진 img 요소로 제공하는 편이 적합합니다.

문법과 주요 값

초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.

.hero { background-image: url("images/scene.webp"); }
.card { background-image: linear-gradient(135deg, #006c9c, #bfe3ff); }

값과 적용 조건은 MDN background-image에서 확인할 수 있습니다.

실행 예제와 결과 비교

아래 전체 코드를 UTF-8 형식의 background-image-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.

<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>background-image 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 240px; height: 140px; border: 1px solid #718096; }
.target { background-image: linear-gradient(135deg, #006c9c, #bfe3ff); }
.reference { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Crect width='160' height='80' fill='%23006c9c'/%3E%3Ccircle cx='40' cy='40' r='24' fill='%23ffd166'/%3E%3C/svg%3E"); background-repeat: no-repeat; }
</style>
</head>
<body>
<main id="demo">
<h1>background-image 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">그라디언트</p><div class="target"></div></div><div class="b"><p class="label">SVG 배경</p><div class="reference"></div></div></section>
</main>
</body>
</html>

첫 박스는 CSS 그라디언트, 두 번째는 예제 코드 안에 포함한 도형 이미지입니다. 전체 예제는 외부 파일 없이 실행할 수 있지만 실제 파일을 사용할 때는 url의 경로가 맞아야 합니다.

파일 경로와 레이어 순서

스타일시트에 쓴 상대 주소는 일반적으로 그 CSS 파일의 위치를 기준으로 해석합니다. HTML 파일 위치와 혼동하지 마세요. 여러 이미지를 쉼표로 쓰면 첫 이미지가 가장 위이며 배경색은 이미지 레이어 아래에 놓입니다.

배경이 있어도 요소 크기는 별도입니다

배경 이미지가 로딩되어도 빈 요소에 자동으로 높이가 생기지는 않습니다. 콘텐츠, padding, height 또는 aspect-ratio로 표시 영역을 마련하세요. 기본 반복을 원하지 않으면 no-repeat를 지정하고 위치·크기를 각각 조절합니다.

한 가지 설정씩 바꾸어 확인하기

앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.

1. 외부 CSS의 images/scene.webp는 CSS 파일을 기준으로 계산합니다. 예를 들어 site/index.html, site/css/style.css, site/images/scene.webp 구조라면 style.css에서는 ../images/scene.webp가 됩니다.
2. 그라디언트와 SVG를 두 레이어로 지정한 뒤 순서만 바꾸어 위에 그려지는 레이어를 확인합니다. 실제 파일 실습에는 자신이 준비한 파일을 쓰고 Network에서 주소·응답을 확인합니다.

첫 예제 파일의 기존 .target background-image 선언을 아래로 바꾸면 반투명 그라디언트가 SVG 위에 그려집니다. 두 이미지 값의 순서만 뒤집으면 SVG가 위에 그려져 겹치는 부분이 달라집니다. 실습 후 원래 한 그라디언트 선언으로 복구하세요. 나중에 background 단축 속성을 지정하면 image·repeat·position·size·origin·clip·attachment·color를 함께 재설정할 수 있습니다.

.target {
  background-image: linear-gradient(135deg, rgb(255 209 102 / 50%), transparent),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='80'%3E%3Crect width='160' height='80' fill='%23006c9c'/%3E%3Ccircle cx='40' cy='40' r='24' fill='%23ffd166'/%3E%3C/svg%3E");
}

여러 배경 속성을 한 화면에서 조합하려면 배경색과 배경 이미지 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 background-size, background-repeat입니다.

적용되지 않거나 예상과 다를 때

• 개발자 도구 Network에서 이미지 요청의 주소와 응답을 확인합니다.
• 빈 박스의 높이가 0이면 배경 설정 전에 박스 크기부터 정합니다.