Revision 1744 of background-image

  • Revision slug: CSS/background-image
  • Revision title: background-image
  • Revision id: 1744
  • Created:
  • Creator: Sheppy
  • Is current revision? No
  • Comment copy edit; 17 words added, 11 words removed

Revision Content

{{ CSSRef() }}

Summary

The background-image CSS property sets the background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The borders of the element are then drawn on top of them, and the {{ cssxref("background-color") }} is drawn beneath them.

How the images are drawn relative to the box and its borders is defined by the {{ cssxref("background-clip") }} and {{ cssxref("background-origin") }} CSS properties.

If a specified image cannot be drawn (for example when the file denoted by the specified URI cannot be loaded), browsers handle them as if it was the none value.

Note: Web developers should always specify a {{ cssxref("background-color") }}, even if the images are opaque and the color won't be displayed in normal circumstances; if the images cannot be loades -- for instance when the network is down -- the background color will be used as a fallback.
  • {{ Xref_cssinitial() }}: none
  • Applies to: all elements
  • {{ Xref_cssinherited() }}: no
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified, but with URI made absolute

Syntax

background-image: background-image[, background-image]*

where:

background-image
Is an {{ Xref_cssimage() }} or the keyword none and denotes the image to display (or the absence of image). There can be several of them as multiple backgrounds are supported.

Examples

{{ CSSRefExampleLink("background-image") }}

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

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

p { background-image: none; }

Specifications

Specification Status Comment
CSS Backgrounds and Borders Module Level 3 {{ Spec2('CSS3 Backgrounds') }} The property has been extended to support multiple backgrounds and any {{ xref_cssimage() }} CSS data type.
CSS 2.1 {{ Spec2('CSS2.1') }} The way images with and without intrinsic dimensions are handled is now described.
CSS 1 {{ Spec2('CSS1') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support {{ CompatGeckoDesktop("1.0") }} 1.0 4.0 3.5 1.0
Multiple backgrounds {{ CompatGeckoDesktop("1.9.2") }} 1.0 9.0 yes 1.3
Gradients {{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }} 1.0{{ property_prefix("-webkit") }} {{ CompatNo() }} {{ CompatNo() }} 4.0{{ property_prefix("-webkit") }}
SVG images {{ CompatGeckoDesktop("2.0") }} 8.0 9.0 9.5 5.0 [1]
element() {{ CompatVersionUnknown() }}{{ property_prefix("-moz") }} {{ CompatUnknown() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
image-rect() {{ CompatVersionUnknown() }}{{ property_prefix("-moz") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Any {{ xref_cssimage() }} value. {{ CompatNo() }} {{ CompatUnknown() }} {{ 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") }} {{ CompatUnknown() }} {{ CompatUnknown() }} yes{{ property_prefix("-webkit") }}
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 (4.2-4.3). The same for Safari prior 5.0.

See also

  • 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") }}, {{ cssxref("-moz-image-rect") }}.

{{ languages( { "de": "de/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}

Revision Source

<p>{{ CSSRef() }}</p>
<h2>Summary</h2>
<p>The<code> background-image </code>CSS property sets the background images for an element. The images are drawn on successive stacking context layers, with the first specified being drawn as if it is the closest to the user. The <a href="/cn/CSS/border" title="border">borders</a> of the element are then drawn on top of them, and the {{ cssxref("background-color") }} is drawn beneath them.</p>
<p>How the images are drawn relative to the box and its borders is defined by the {{ cssxref("background-clip") }} and {{ cssxref("background-origin") }} CSS properties.</p>
<p>If a specified image cannot be drawn (for example when the file denoted by the specified URI cannot be loaded), browsers handle them as if it was the <code>none</code> value.</p>
<div class="note"><strong>Note:</strong> Web developers should always specify a {{ cssxref("background-color") }}, even if the images are opaque and the color won't be displayed in normal circumstances; if the images cannot be loades -- for instance when the network is down -- the background color will be used as a fallback.</div>
<ul class="cssprop"> <li>{{ Xref_cssinitial() }}: <code>none</code></li> <li>Applies to: all elements</li> <li>{{ Xref_cssinherited() }}: no</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified, but with URI made absolute</li>
</ul>
<h2>Syntax</h2>
<pre class="eval syntaxbox">background-image: <em>background-image</em>[, <em>background-image</em>]*
</pre>
<p>where:</p>
<dl> <dt><em>background-image</em></dt> <dd>Is an {{ Xref_cssimage() }} or the keyword <code>none</code> and denotes the image to display (or the absence of image). There can be several of them as <a href="/en/CSS/Multiple_backgrounds" title="Multiple backgrounds">multiple backgrounds</a> are supported.</dd>
</dl>
<h2>Examples</h2>
<p>{{ CSSRefExampleLink("background-image") }}</p>
<pre>body { background-image: url("images/darkpattern.png"); }

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

p { background-image: none; }
</pre>
<h2>Specifications</h2>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-background/#background-image" title="http://www.w3.org/TR/css3-background/#background-image">CSS Backgrounds and Borders Module Level 3</a></td> <td>{{ Spec2('CSS3 Backgrounds') }}</td> <td>The property has been extended to support multiple backgrounds and any {{ xref_cssimage() }} CSS data type.</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image" title="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image">CSS 2.1</a></td> <td>{{ Spec2('CSS2.1') }}</td> <td>The way images with and without intrinsic dimensions are handled is now described.</td> </tr> <tr> <td><a class="external" href="http://www.w3.org/TR/CSS1/#background-image" title="http://www.w3.org/TR/CSS1/#background-image">CSS 1</a></td> <td>{{ Spec2('CSS1') }}</td> <td> </td> </tr> </tbody>
</table>
<h2>Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Firefox (Gecko)</th> <th>Chrome</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatGeckoDesktop("1.0") }}</td> <td>1.0</td> <td>4.0</td> <td>3.5</td> <td>1.0</td> </tr> <tr> <td>Multiple backgrounds</td> <td>{{ CompatGeckoDesktop("1.9.2") }}</td> <td>1.0</td> <td>9.0</td> <td>yes</td> <td>1.3</td> </tr> <tr> <td>Gradients</td> <td>{{ CompatGeckoDesktop("1.9.2") }}{{ property_prefix("-moz") }}</td> <td>1.0{{ property_prefix("-webkit") }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>4.0{{ property_prefix("-webkit") }}</td> </tr> <tr> <td>SVG images</td> <td>{{ CompatGeckoDesktop("2.0") }}</td> <td>8.0</td> <td>9.0</td> <td>9.5</td> <td>5.0 [1]</td> </tr> <tr> <td><code>element()</code></td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-moz") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> <td>{{ CompatNo() }}</td> </tr> <tr> <td><code>image-rect()</code></td> <td>{{ CompatVersionUnknown() }}{{ property_prefix("-moz") }}</td> <td>{{ CompatNo() }}</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> <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") }}</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatUnknown() }}</td> <td>yes{{ property_prefix("-webkit") }}</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>
<h4>Notes</h4>
<p>[1] Support of SVG in CSS background is incomplete in the current version of iOS Safari (4.2-4.3). The same for Safari prior 5.0.</p>
<h2>See also</h2>
<ul> <li><a href="/en/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") }}, {{ cssxref("-moz-image-rect") }}.</li>
</ul>
<p>{{ languages( { "de": "de/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}</p>
Revert to this revision