Want to share your CSS expertise with others? Apply to the MDN Fellowship by April 1! http://mzl.la/MDNFellowship

mozilla

Version 89629 von background

  • Adressname der Version: CSS/background
  • Titel der Version: background
  • ID der Version: 89629
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar 24 words removed

Inhalt der Version

Übersicht:

Die background Eigenschaft ist eine Kurzform für mehrere Hintergrund-Eigenschaften. Es können eine oder mehrere Eigenschaften angegeben werden, um die Standardwerte zu verändern. Eine Angabe aller Eigenschaften ist nicht notwendig.

Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergründe, durch Kommata getrennt, definiert werden.
Der zuerst definierte Hintergrund ist dabei der Oberste.
  • Standardwert: siehe einzelne Eigenschaften
  • Anwendbar auf: Alle Elemente
  • Vererbbar: Nein
  • Prozentwerte: nur bei background-position
  • Medium: visuell
  • Werte: inherit | <Hintergrund>

Syntax

background: inherit | [<Hintergrund>, ]* <unterster-Hintergrund>

<Hintergrund>:
[<background-image>  || <background-position>  || <background-repeat>  || <background-attachment>]
| inherit 

<unterster-Hintergrund>:
[<background-color> || <background-image>  || <background-position>  || <background-repeat>  || <background-attachment>]
|  inherit || <background-color>

Werte

inherit
Der Wert des Elternelements wird geerbt.
<background-color>
siehe background-color
<background-image>
siehe background-image
<background-position>
siehe background-position
<background-repeat>
siehe background-repeat
<background-attachment>
siehe background-attachment

Beispiele

Live Beispiel

Einfache Hintergrundfarbe

background: yellow;

Einzelnes Hintergrundbild

background: url(images/topquote.png) #c6c6c6 top left no-repeat;
padding: 15px;
width: 300px;

Mehrere Hintergründe Ab Gecko 1.9.2

background: url(images/topquote.png) top left no-repeat, 
            url(images/topquote.png) #c6c6c6 bottom right no-repeat;
padding: 15px;
width: 300px; 

Browser Kompatibilität

Browser ab Version mehrere Hintergründe
Internet Explorer 4.0 ---
Firefox (Gecko) 1.0 (1.0) 3.6 (1.9.2)
Opera 3.5 ---
Safari (WebKit) 1.0 (85) 1.3 (312)

Spezifikation

Siehe auch

{{ languages( { "en": "en/CSS/background", "fr": "fr/CSS/background", "it": "it/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background", "ko": "ko/CSS/background", "es": "es/CSS/background" } ) }}

Quelltext der Version

<h3>Übersicht:</h3>
<p>Die <code>background</code> Eigenschaft ist eine Kurzform für mehrere Hintergrund-Eigenschaften. Es können eine oder mehrere Eigenschaften angegeben werden, um die Standardwerte zu verändern. Eine Angabe aller Eigenschaften ist nicht notwendig.</p>
<div class="note">Ab Gecko 1.9.2 (Firefox 3.6) können mehrere Hintergründe, durch Kommata getrennt, definiert werden. <br>
Der zuerst definierte Hintergrund ist dabei der Oberste.</div>
<ul> <li>Standardwert: siehe einzelne Eigenschaften</li> <li>Anwendbar auf: Alle Elemente</li> <li>Vererbbar: Nein</li> <li>Prozentwerte: nur bei <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a></li> <li>Medium: visuell</li> <li>Werte: <a href="/de/CSS/inherit" title="de/CSS/inherit"><code>inherit</code></a> | &lt;Hintergrund&gt;</li>
</ul>
<h3>Syntax</h3>
<pre class="eval">background: inherit | [&lt;Hintergrund&gt;, ]* &lt;unterster-Hintergrund&gt;

<strong>&lt;Hintergrund&gt;</strong>:
[&lt;background-image&gt;  || &lt;background-position&gt;  || &lt;background-repeat&gt;  || &lt;background-attachment&gt;]
| inherit 

<strong>&lt;unterster-Hintergrund&gt;</strong>:
[&lt;background-color&gt; || &lt;background-image&gt;  || &lt;background-position&gt;  || &lt;background-repeat&gt;  || &lt;background-attachment&gt;]
|  inherit || &lt;background-color&gt;
</pre>
<h3>Werte</h3>
<dl> <dt>inherit</dt> <dd>Der Wert des Elternelements wird geerbt.</dd> <dt>&lt;background-color&gt;</dt> <dd>siehe <a href="/de/CSS/background-color" title="de/CSS/background-color"><code>background-color</code></a></dd> <dt>&lt;background-image&gt;</dt> <dd>siehe <a href="/de/CSS/background-image" title="de/CSS/background-image"><code>background-image</code></a></dd> <dt>&lt;background-position&gt;</dt> <dd>siehe <a href="/de/CSS/background-position" title="de/CSS/background-position"><code>background-position</code></a></dd> <dt>&lt;background-repeat&gt;</dt> <dd>siehe <a href="/de/CSS/background-repeat" title="de/CSS/background-repeat"><code>background-repeat</code></a></dd> <dt>&lt;background-attachment&gt;</dt> <dd>siehe <a href="/de/CSS/background-attachment" title="de/CSS/background-attachment"><code>background-attachment</code></a></dd>
</dl>
<h3>Beispiele</h3>
<p><a class=" external" href="http://developer.mozilla.org/samples/cssref/background.html" rel="external nofollow" target="_blank" title="http://developer.mozilla.org/samples/cssref/background.html">Live Beispiel</a></p>
<h4>Einfache Hintergrundfarbe</h4>
<pre>background: yellow;
</pre>
<h4>Einzelnes Hintergrundbild</h4>
<pre>background: url(images/topquote.png) #c6c6c6 top left no-repeat;
padding: 15px;
width: 300px;
</pre>
<h4>Mehrere Hintergründe <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: url(images/topquote.png) top left no-repeat, 
            url(images/topquote.png) #c6c6c6 bottom right no-repeat;
padding: 15px;
width: 300px; 
</pre>
<h3>Browser <span>Kompatibilität</span></h3>
<table class="standard-table"> <tbody> <tr> <th>Browser</th> <th>ab Version</th> <th>mehrere Hintergründe</th> </tr> <tr> <td>Internet Explorer</td> <td>4.0</td> <td>---</td> </tr> <tr> <td>Firefox (Gecko)</td> <td>1.0 (1.0)</td> <td>3.6 (1.9.2)</td> </tr> <tr> <td>Opera</td> <td>3.5</td> <td>---</td> </tr> <tr> <td>Safari (WebKit)</td> <td>1.0 (85)</td> <td>1.3 (312)</td> </tr> </tbody>
</table>
<h3>Spezifikation</h3>
<ul> <li><a class="external" href="http://www.w3.org/TR/css3-background/#the-background" lang="en">CSS 3 Background and Borders #background</a></li> <li><a class="external" href="http://www.w3.org/TR/CSS21/colors.html#propdef-background" lang="en">CSS 2.1 Colors and Backgrounds #background</a></li>
</ul>
<h3>Siehe auch</h3>
<ul> <li><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-image" title="de/CSS/background-image"><code>background-image</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>
</ul>
<p>{{ languages( { "en": "en/CSS/background", "fr": "fr/CSS/background", "it": "it/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background", "ko": "ko/CSS/background", "es": "es/CSS/background" } ) }}</p>
Zu dieser Version zurücksetzen