background

  • Adressname der Version: CSS/background
  • Titel der Version: background
  • ID der Version: 89630
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Nein
  • Kommentar Opera 10.5; 1 words added, 1 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 10.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>10.5</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