mozilla

Version 104999 von background-image

  • Adressname der Version: CSS/background-image
  • Titel der Version: background-image
  • ID der Version: 104999
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar Opera 10.5; 1 words added, 1 words removed
Schlagwörter: 

Inhalt der Version

Ü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.

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() Ab Gecko 1.9.2
Linearer Verlauf
-moz-radial-gradient() Ab Gecko 1.9.2
Radialer Verlauf

Beispiele

Live Beispiel

Einzelnes Hintergrundbild

background-image: url(img.jpg);

Mehrere Hintergrundbilder Ab Gecko 1.9.2

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

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

<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>Werte: <code>none</code> | <a href="/de/CSS/url_Funktion" title="de/CSS/url_Funktion"><code>url</code></a> | <code>inherit</code> | <a href="/de/CSS/-moz-linear-gradient" title="de/CSS/-moz-linear-gradient"><code>-moz-linear-gradient</code></a> <span style="border: 1px solid rgb(129, 129, 81); padding: 2px; background-color: rgb(255, 255, 225); font-size: x-small; white-space: nowrap;">Ab Gecko 1.9.2</span> | <a href="/de/CSS/-moz-radial-gradient" title="de/CSS/-moz-radial-gradient"><code>-moz-radial-gradient</code></a> <span style="border: 1px solid rgb(129, 129, 81); padding: 2px; background-color: rgb(255, 255, 225); font-size: x-small; white-space: nowrap;">Ab Gecko 1.9.2</span></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> <span style="border: 1px solid rgb(129, 129, 81); padding: 2px; background-color: rgb(255, 255, 225); font-size: x-small; white-space: nowrap;">Ab Gecko 1.9.2</span></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> <span style="border: 1px solid rgb(129, 129, 81); padding: 2px; background-color: rgb(255, 255, 225); font-size: x-small; white-space: nowrap;">Ab Gecko 1.9.2</span></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 <span style="border: 1px solid rgb(129, 129, 81); padding: 2px; background-color: rgb(255, 255, 225); font-size: x-small; white-space: nowrap;">Ab Gecko 1.9.2</span></h4>
<pre>background-image: url(img1.jpg), url(img2.jpg);
</pre>
<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/mac/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-color" title="de/CSS/background-color"><code>background-color</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></li> <li><a href="/de/CSS/-moz-background-size" title="de/CSS/-moz-background-size"><code>-moz-background-size</code></a>, <a href="/de/CSS/-moz-background-origin" title="de/CSS/-moz-background-origin"><code>-moz-background-origin</code></a>, <a href="/de/CSS/-moz-background-clip" title="de/CSS/-moz-background-clip"><code>-moz-background-clip</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