background-image

  • 리비전 슬러그: CSS/background-image
  • 리비전 제목: background-image
  • 리비전 아이디: 315213
  • 제작일시:
  • 만든이: jaemin_jo
  • 현재 리비전인가요?
  • 댓글

리비전 내용

{{ CSSRef() }}

요약

background-image CSS 속성은 엘리먼트의 배경 이미지를 지정한다. 배경 이미지가 여러개 지정되었다면 먼저 지정된 것 부터 차례로 쌓인다. 처음 지정된 이미지가 가장 먼저 그려지고  마지막으로 지정된 이미지가 가장 나중에 그려진다(마지막에 지정한 이미지가 사용자가 보는 화면과 가장 가깝게 그려진다). borders 속성은 이미지 위에 그려지며 {{ cssxref("background-color") }} 속성은 이미지 아래에 그려진다. 

엘리먼트 박스에 대한 이미지의 위치는 {{ cssxref("background-clip") }} 와 {{ cssxref("background-origin") }} 속성을 지정함으로써 변경할 수 있다.

지정된 이미지를 그릴수 없을 때에는(예를 들어 존재하지 않는 주소로 지정했으면) 브라우저는 none 값이 설정된 것으로 간주한다. 

참고: 불투명한 이미지를 배경으로 지정하더라도 항상 {{ cssxref("background-color") }} 속성을 지정하는걸 권장한다. 네트워크 오류와 같이 이미지를 불러오는데 문제가 발생했을 경우에는 {{ cssxref("background-color") }} 속성을 대비책으로 사용하기 때문이다. 
  • {{ Xref_cssinitial() }} none
  • 적용 대상모든 엘리먼트
  • {{ Xref_cssinherited() }} no
  • Media {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }} as specified, but with URI made absolute

문법

background-image: background-image[, background-image]*
background-image
배경으로 사용될 {{ Xref_cssimage() }} 또는 키워드 none을 지정한다. 이때 none은 배경으로 이미지를 사용하지 않음을 의미한다. multiple backgrounds 가 지원되는 환경이라면 여러개의 이미지를 지정할 수 있다.

예제

{{ CSSLiveSample("background-image.html") }}

body { 
  background-image: url("images/darkpattern.png"); 
}

div { 
  background-image: url("images/foo.png"), url("images/bar.png"); 
}

p { 
  background-image: none; 
}

명세

명세 상태 주석
{{ SpecName('CSS3 Backgrounds', '#background-image', 'background-image') }} {{ Spec2('CSS3 Backgrounds') }} From CSS2 Revision 1, the property has been extended to support multiple backgrounds and any {{ xref_cssimage() }} CSS data type.
{{ SpecName('CSS2.1', 'colors.html#propdef-background-image', 'background-image') }} {{ Spec2('CSS2.1') }} From CSS1, the way images with and without intrinsic dimensions are handled is now described.
{{ SpecName('CSS1', '#background-image', 'background-image') }} {{ Spec2('CSS1') }}  

브라우저 호환성

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 {{ CompatGeckoDesktop("1.0") }} 4.0 3.5 1.0
Multiple backgrounds 1.0 {{ CompatGeckoDesktop("1.9.2") }} 9.0 yes 1.3
Gradients 1.0{{ property_prefix("-webkit") }} {{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} 10 11+{{ property_prefix("-o") }} 4.0{{ property_prefix("-webkit") }}
SVG images 8.0 {{ CompatGeckoDesktop("2.0") }} 9.0 9.5 5.0 [1]
element() {{ CompatUnknown() }} {{ CompatVersionUnknown() }}{{ property_prefix("-moz") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
image-rect() {{ CompatNo() }} {{ CompatVersionUnknown() }}{{ property_prefix("-moz") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Any {{ xref_cssimage() }} value. {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
Feature iOS Safari Opera Mini Opera Mobile Android Browser
Basic support yes yes yes yes
Multiple backgrounds yes yes yes yes
Gradients yes {{ property_prefix("-webkit") }}
old webkit syntax for iOS 4.2 and older
{{ CompatUnknown() }} {{ CompatUnknown() }} yes{{ property_prefix("-webkit") }}
old webkit syntax
SVG images yes [1] yes yes {{ CompatNo() }}
element() {{ CompatVersionUnknown() }}{{ property_prefix("-moz") }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}
image-rect() {{ CompatVersionUnknown() }}{{ property_prefix("-moz") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Any {{ xref_cssimage() }} value {{ CompatNo() }} {{ CompatUnknown() }} {{ CompatUnknown() }} {{ CompatUnknown() }}

Notes

[1] Support of SVG in CSS background is incomplete in the current version of iOS Safari (5.0). The same for Safari prior 5.0.

더 보기

  • Multiple backgrounds and background-related properties: {{ CSS_Reference:Background() }}.
  • Image-related articles: {{ xref_cssimage() }}, {{ cssxref("linear-gradient") }}, {{ cssxref("radial-gradient") }}, {{ cssxref("repeating-linear-gradient") }}, {{ cssxref("repeating-radial-gradient") }}, {{ cssxref("element") }}.

리비전 소스

<p>{{ CSSRef() }}</p>
<h2 id=".EC.9A.94.EC.95.BD">요약</h2>
<p><code>background-image</code> CSS 속성은 엘리먼트의 배경 이미지를 지정한다. 배경 이미지가 여러개 지정되었다면 먼저 지정된 것 부터 차례로 쌓인다. 처음 지정된 이미지가 가장 먼저 그려지고 &nbsp;마지막으로 지정된 이미지가 가장 나중에 그려진다(마지막에 지정한 이미지가 사용자가 보는 화면과 가장 가깝게 그려진다).&nbsp;<a href="/cn/CSS/border" title="border">borders</a>&nbsp;속성은 이미지 위에 그려지며 {{ cssxref("background-color") }} 속성은 이미지 아래에 그려진다.&nbsp;</p>
<p>엘리먼트 박스에 대한 이미지의 위치는 {{ cssxref("background-clip") }} 와 {{ cssxref("background-origin") }} 속성을 지정함으로써 변경할 수 있다.</p>
<p>지정된 이미지를 그릴수 없을 때에는(예를 들어 존재하지 않는 주소로 지정했으면) 브라우저는 none 값이 설정된 것으로 간주한다.&nbsp;</p>
<div class="note">
  <strong>참고:</strong>&nbsp;불투명한 이미지를 배경으로 지정하더라도 항상 {{ cssxref("background-color") }} 속성을 지정하는걸 권장한다. 네트워크 오류와 같이 이미지를 불러오는데 문제가 발생했을 경우에는 {{ cssxref("background-color") }} 속성을 대비책으로 사용하기 때문이다.&nbsp;</div>
<ul class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>none</code></li>
  <li><dfn>적용 대상</dfn>모든 엘리먼트</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> no</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> as specified, but with URI made absolute</li>
</ul>
<h2 id=".EB.AC.B8.EB.B2.95">문법</h2>
<pre class="eval syntaxbox">
background-image: <em>background-image</em>[, <em>background-image</em>]*</pre>
<dl>
  <dt>
    <em>background-image</em></dt>
  <dd>
    배경으로 사용될 {{ Xref_cssimage() }} 또는 키워드 none을 지정한다. 이때 none은 배경으로 이미지를 사용하지 않음을 의미한다. <a href="/en-US/docs/CSS/Multiple_backgrounds" title="Multiple backgrounds">multiple backgrounds</a>&nbsp;가 지원되는 환경이라면 여러개의 이미지를 지정할 수 있다.</dd>
</dl>
<h2 id=".EC.98.88.EC.A0.9C">예제</h2>
<p>{{ CSSLiveSample("background-image.html") }}</p>
<pre class="brush: css; highlight:[2,6,10]">
body { 
  background-image: url("images/darkpattern.png"); 
}

div { 
  background-image:&nbsp;url("images/foo.png"), url("images/bar.png"); 
}

p { 
  background-image: none; 
}
</pre>
<h2 id=".EB.AA.85.EC.84.B8">명세</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 {{ xref_cssimage() }} 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>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id=".EB.B8.8C.EB.9D.BC.EC.9A.B0.EC.A0.80_.ED.98.B8.ED.99.98.EC.84.B1">브라우저 호환성</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td style="vertical-align: top;">1.0</td>
        <td>{{ CompatGeckoDesktop("1.0") }}</td>
        <td>4.0</td>
        <td>3.5</td>
        <td>1.0</td>
      </tr>
      <tr>
        <td>Multiple backgrounds</td>
        <td style="vertical-align: top;">1.0</td>
        <td>{{ CompatGeckoDesktop("1.9.2") }}</td>
        <td>9.0</td>
        <td>yes</td>
        <td>1.3</td>
      </tr>
      <tr>
        <td>Gradients</td>
        <td style="vertical-align: top;">1.0{{ property_prefix("-webkit") }}</td>
        <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}</td>
        <td>10</td>
        <td>11+{{ property_prefix("-o") }}</td>
        <td>4.0{{ property_prefix("-webkit") }}</td>
      </tr>
      <tr>
        <td>SVG images</td>
        <td style="vertical-align: top;">8.0</td>
        <td>{{ CompatGeckoDesktop("2.0") }}</td>
        <td>9.0</td>
        <td>9.5</td>
        <td>5.0 [1]</td>
      </tr>
      <tr>
        <td><code>element()</code></td>
        <td style="vertical-align: top;">{{ CompatUnknown() }}</td>
        <td>{{ CompatVersionUnknown() }}{{ property_prefix("-moz") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>image-rect()</code></td>
        <td style="vertical-align: top;">{{ CompatNo() }}</td>
        <td>{{ CompatVersionUnknown() }}{{ property_prefix("-moz") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td>Any {{ xref_cssimage() }} value.</td>
        <td style="vertical-align: top;">{{ CompatUnknown() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>iOS Safari</th>
        <th>Opera Mini</th>
        <th>Opera Mobile</th>
        <th>Android Browser</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>Multiple backgrounds</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
        <td>yes</td>
      </tr>
      <tr>
        <td>Gradients</td>
        <td>yes {{ property_prefix("-webkit") }}<br />
          old webkit syntax for iOS 4.2 and older</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>yes{{ property_prefix("-webkit") }}<br />
          old webkit syntax</td>
      </tr>
      <tr>
        <td>SVG images</td>
        <td>yes [1]</td>
        <td>yes</td>
        <td>yes</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td><code>element()</code></td>
        <td>{{ CompatVersionUnknown() }}{{ property_prefix("-moz") }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
      <tr>
        <td><code>image-rect()</code></td>
        <td>{{ CompatVersionUnknown() }}{{ property_prefix("-moz") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td>Any {{ xref_cssimage() }} value</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
        <td>{{ CompatUnknown() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="Notes">Notes</h3>
<p>[1] Support of SVG in CSS background is incomplete in the current version of iOS Safari (5.0). The same for Safari prior 5.0.</p>
<h2 id=".EB.8D.94_.EB.B3.B4.EA.B8.B0">더 보기</h2>
<ul>
  <li><a href="/en-US/docs/CSS/Multiple_backgrounds" title="en/CSS/Multiple backgrounds">Multiple backgrounds</a> and background-related properties: {{ CSS_Reference:Background() }}.</li>
  <li>Image-related articles: {{ xref_cssimage() }}, {{ cssxref("linear-gradient") }}, {{ cssxref("radial-gradient") }}, {{ cssxref("repeating-linear-gradient") }}, {{ cssxref("repeating-radial-gradient") }}, {{ cssxref("element") }}.</li>
</ul>
Revert to this revision