mozilla

Version 105001 von background-image

  • Adressname der Version: CSS/background-image
  • Titel der Version: background-image
  • ID der Version: 105001
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar no wording changes
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);

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