---
title: background-image
slug: Web/CSS/background-image
tags:
  - CSS
  - CSS Background
  - CSS Property
  - Reference
translation_of: Web/CSS/background-image
---
<div>{{CSSRef}}</div>

<p><a href="/ko/docs/Web/CSS">CSS</a> <strong><code>background-image</code></strong> 속성은 요소의 배경 이미지를 한 개나 여러 개 지정합니다.</p>

<div>{{EmbedInteractiveExample("pages/css/background-image.html")}}</div>

<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div>

<p>여러 개의 배경 이미지는 쌓임 맥락에 따라 서로의 위에 놓입니다. 맨 처음 지정한 이미지가 제일 위에(사용자에게 제일 가까운 것 처럼) 위치합니다.</p>

<p><a href="/ko/docs/Web/CSS/border">테두리</a>는 배경 이미지 위에, {{cssxref("background-color")}}는 밑에 그려집니다. 요소 박스와 테두리에 관련하여 배경 이미지를 어떻게 그릴지는 {{cssxref("background-clip")}}과 {{cssxref("background-origin")}} CSS 속성이 정의합니다.</p>

<p>브라우저는 값에 유효하지 않은 URI를 지정하는 등 주어진 이미지를 그릴 수 없을 때 <code>none</code> 키워드를 사용한 것처럼 처리합니다.</p>

<div class="note"><strong>참고:</strong> 지정한 이미지가 불투명해서 아래의 배경색을 볼 수 없더라도 {{cssxref("background-color")}}는 지정해야 합니다. 네트워크가 내려가는 등 이미지를 불러올 수 없는 상황에서 배경 색이 대체할 수 있기 때문입니다,</div>

<h2 id="구문">구문</h2>

<p>각각의 배경 이미지는 <code>{{anch("none")}}</code> 키워드나 {{cssxref("&lt;image&gt;")}} 값으로 지정할 수 있습니다.</p>

<p>여러 개의 배경 이미지를 지정하려면 쉼표로 구분한 다수의 값을 지정하세요.</p>

<pre class="brush: css notranslate">background-image:
  linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),
  url('https://mdn.mozillademos.org/files/7693/catfront.png');</pre>

<h3 id="값">값</h3>

<dl>
 <dt><a id="none" name="none"><code>none</code></a></dt>
 <dd>배경 이미지의 부재를 나타내는 키워드입니다.</dd>
 <dt>{{cssxref("&lt;image&gt;")}}</dt>
 <dd>배경으로 사용할 이미지입니다. <a href="/ko/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds">여러 개의 배경 이미지</a>를 사용할 땐 쉼표로 구분한 다수의 값을 지정하세요.</dd>
</dl>

<h2 id="접근성_고려사항">접근성 고려사항</h2>

<p>브라우저는 배경 이미지에 대한 어떠한 추가 정보도 접근성 보조 기술에 제공하지 않습니다. 특히 스크린 리더의 경우 배경 이미지의 존재 유무조차 알려주지 않습니다. 이미지가 페이지 목적의 이해에 필수적인 정보를 갖고 있다면 문서에서 구조적으로 설명하는 편이 좋습니다.</p>

<ul>
 <li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
 <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="형식_정의">형식 정의</h2>

<p>{{cssinfo}}</p>

<h2 id="형식_구문">형식 구문</h2>

<pre class="syntaxbox notranslate">{{csssyntax}}</pre>

<h2 id="예제">예제</h2>

<h3 id="배경_이미지_레이어링">배경 이미지 레이어링</h3>

<p>별 모양 이미지는 배경이 투명하고, 고양이 이미지 위에 위치합니다.</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;div&gt;
  &lt;p class="catsandstars"&gt;
    This paragraph is full of cats&lt;br /&gt;and stars.
  &lt;/p&gt;
  &lt;p&gt;This paragraph is not.&lt;/p&gt;
  &lt;p class="catsandstars"&gt;
    Here are more cats for you.&lt;br /&gt;Look at them!
  &lt;/p&gt;
  &lt;p&gt;And no more.&lt;/p&gt;
&lt;/div&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">p {
  font-size: 1.5em;
  color: #FE7F88;
  background-image: none;
  background-color: transparent;
}

div {
  background-image:
      url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
}

.catsandstars {
  background-image:
      url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
      url("https://mdn.mozillademos.org/files/7693/catfront.png");
  background-color: transparent;
}</pre>

<h4 id="결과">결과</h4>

<p>{{EmbedLiveSample('배경_이미지_레이어링')}}</p>

<ul>
</ul>

<h2 id="명세">명세</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">명세</th>
   <th scope="col">상태</th>
   <th scope="col">주석</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS3 Backgrounds', '#background-image', 'background-image') }}</td>
   <td>{{ Spec2('CSS3 Backgrounds') }}</td>
   <td>From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any {{cssxref("&lt;image&gt;")}} CSS data type.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>From CSS1, the way images with and without intrinsic dimensions are handled is now described.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#background-image', 'background-image') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="브라우저_호환성">브라우저 호환성</h2>



<div>{{Compat("css.properties.background-image")}}</div>

<h2 id="같이_보기">같이 보기</h2>

<ul>
 <li><a href="/ko/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS">CSS로 이미지 스프라이트 구현하기</a></li>
 <li>{{HTMLElement("img")}}</li>
 <li>이미지 관련 자료형: {{cssxref("&lt;image&gt;")}}, {{cssxref("&lt;gradient&gt;")}}</li>
 <li>이미지 관련 함수: {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}, {{cssxref("_image", "image()")}}, {{cssxref("image-set")}}, {{cssxref("url", "url()")}}</li>
</ul>