mozilla

Version 237008 von background-image

  • Adressname der Version: CSS/background-image
  • Titel der Version: background-image
  • ID der Version: 237008
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar SVG images as CSS background; 24 words added
Schlagwörter: 

Inhalt der Version

{{ CSSRef() }}

Übersicht:

Die background-image Eigenschaft legt ein Hintergrundbild fest. Hintergrundbilder werden immer über Hintergrundfarben gelegt. Es ist daher sinnvoll immer eine Hintergrundfarbe mittels background-color anzugeben, um bei ausgeschalteten Grafiken oder Fehlern beim Laden des Bildes einen ausreichenden Kontrast zu gewährleisten. Die Kurzform background bietet sich daher an, um beides zu notieren.

Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundbilder, durch Kommata getrennt, definiert werden.
Das zuerst definierte Hintergrundbild ist dabei das Oberste.
  • Standardwert: none
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: Nein
  • Medium: visuell
  • berechneter Wert: absolute URI oder none

Syntax

background-image:  <Hintergrundbild>[, <Hintergrundbild>]*

<Hintergrundbild>:
none | url | inherit | -moz-linear-gradient() | -moz-radial-gradient()

Werte

none
Standardwert. Es wird kein Hintergrundbild verwendet.
url
Der Pfad des Bildes, das als Hintergrund angezeigt werden soll.
inherit
Der Wert des Elternelements wird geerbt.

Mozilla Erweiterungen:

-moz-linear-gradient() {{ gecko_minversion_inline("1.9.2") }}
Linearer Verlauf
-moz-radial-gradient() {{ gecko_minversion_inline("1.9.2") }}
Radialer Verlauf

Beispiele

Live Beispiel

Einzelnes Hintergrundbild

background-image: url(img.jpg);

Mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}

background-image: url(img1.jpg), url(img2.jpg);

{{ gecko_callout_heading("2.0") }}

Ab Gecko 2.0 {{ geckoRelease("2.0") }} werden auch SVG Bilder als CSS Hintergründe akzeptiert.

Browser Kompatibilität

Browser ab Version mehrere Hintergrundbilder Verläufe
Internet Explorer 4.0 --- ---
Firefox (Gecko) 1.0 (1.0) 3.6 (1.9.2) 3.6 (1.9.2) [-moz-]
Opera 3.5 10.5 ---
Safari (WebKit) 1.0 (85) 1.3 (312) 4.0 (528) [-webkit-]

Spezifikation

Siehe auch

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

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h3>Übersicht:</h3>
<p>Die <code>background-image</code> Eigenschaft legt ein Hintergrundbild fest. Hintergrundbilder werden immer über Hintergrundfarben gelegt. Es ist daher sinnvoll immer eine Hintergrundfarbe mittels <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a> anzugeben, um bei ausgeschalteten Grafiken oder Fehlern beim Laden des Bildes einen ausreichenden Kontrast zu gewährleisten. Die Kurzform <a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a> bietet sich daher an, um beides zu notieren.</p>
<div class="note">Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergrundbilder, durch Kommata getrennt, definiert werden. <br>
Das zuerst definierte Hintergrundbild ist dabei das Oberste.</div>
<ul> <li>Standardwert: <code>none</code></li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: Nein</li> <li>Medium: visuell</li> <li>berechneter Wert: absolute URI oder <code>none</code></li>
</ul>
<h3>Syntax</h3>
<pre class="eval">background-image:  &lt;Hintergrundbild&gt;[, &lt;Hintergrundbild&gt;]*

<strong>&lt;Hintergrundbild&gt;</strong>:
none | url | inherit | -moz-linear-gradient() | -moz-radial-gradient()

</pre>
<h3>Werte</h3>
<dl> <dt>none</dt> <dd>Standardwert. Es wird kein Hintergrundbild verwendet.</dd> <dt>url</dt> <dd>Der Pfad des Bildes, das als Hintergrund angezeigt werden soll.</dd> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd>
</dl>
<h4>Mozilla Erweiterungen:</h4>
<dl> <dt><a href="/de/CSS/-moz-linear-gradient" title="de/CSS/-moz-linear-gradient"><code>-moz-linear-gradient()</code></a> {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>Linearer Verlauf</dd> <dt><a href="/de/CSS/-moz-radial-gradient" title="de/CSS/-moz-radial-gradient"><code>-moz-radial-gradient()</code></a> {{ gecko_minversion_inline("1.9.2") }}</dt> <dd>Radialer Verlauf</dd>
</dl>
<h3>Beispiele</h3>
<p><a class=" external" href="http://developer.mozilla.org/samples/cssref/background-image.html" rel="external nofollow" target="_blank" title="http://developer.mozilla.org/samples/cssref/background-image.html">Live Beispiel</a></p>
<h4>Einzelnes Hintergrundbild</h4>
<pre>background-image: url(img.jpg);
</pre>
<h4>Mehrere Hintergrundbilder {{ gecko_minversion_inline("1.9.2") }}</h4>
<pre>background-image: url(img1.jpg), url(img2.jpg);
</pre>
<div class="geckoVersionNote">
<p>{{ gecko_callout_heading("2.0") }}</p>
<p>Ab Gecko 2.0 {{ geckoRelease("2.0") }} werden auch SVG Bilder als CSS Hintergründe akzeptiert.</p>
</div>
<h3>Browser <span>Kompatibilität</span></h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> <th>mehrere Hintergrundbilder</th> <th>Verläufe</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>---</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>3.6 (1.9.2)</td> <td>3.6 (1.9.2) [-moz-]</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>10.5</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.3 (312)</td> <td>4.0 (528) [<a class=" external" href="http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariCSSRef/Articles/Functions.html#//apple_ref/doc/uid/TP40007955-SW25">-webkit-</a>]</td> </tr> </tbody>
</table>
<h3>Spezifikation</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#background-image" lang="en">CSS 3 Background and Borders #background-image</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background-image" lang="en">CSS 2.1 Colors and Backgrounds #background-image</a></li> <li><a class="external" href="http://dev.w3.org/csswg/css3-images/#gradients-" lang="en">CSS 3 Images #gradients</a> (Editor's Draft)</li>
</ul>
<h3>Siehe auch</h3>
<ul> <li><a href="/de/CSS/background" title="de/CSS/background"><code>background</code></a>, <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a>, <a href="/de/CSS/background-clip" title="de/CSS/background-clip"><code>background-clip</code></a>, <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a>, <a href="/de/CSS/background-origin" title="de/CSS/background-origin"><code>background-origin</code></a>, <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a>, <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a>, <a href="/de/CSS/background-size" title="de/CSS/background-size"><code>background-size</code></a></li> <li><a href="/de/CSS/-moz-background-inline-policy" title="de/CSS/-moz-background-inline-policy"><code>-moz-background-inline-policy</code></a></li> <li><a href="/de/CSS/-moz-linear-gradient" title="de/CSS/-moz-linear-gradient"><code>-moz-linear-gradient</code></a>, <a href="/de/CSS/-moz-radial-gradient" title="de/CSS/-moz-radial-gradient"><code>-moz-radial-gradient</code></a>, <a href="/de/CSS/-moz-repeating-linear-gradient" title="de/CSS/-moz-repeating-linear-gradient"><code>-moz-repeating-linear-gradient</code></a>, <a href="/de/CSS/-moz-repeating-radial-gradient" title="de/CSS/-moz-repeating-radial-gradient"><code>-moz-repeating-radial-gradient</code></a></li>
</ul>
<p>{{ languages( {"en": "en/CSS/background-image", "fr": "fr/CSS/background-image", "pl": "pl/CSS/background-image", "es": "es/CSS/background-image" } ) }}</p>
Zu dieser Version zurücksetzen