background

  • Adressname der Version: Web/CSS/background
  • Titel der Version: background
  • ID der Version: 498927
  • Erstellt:
  • Autor: fscholz
  • Aktuelle Version? Ja
  • Kommentar <h4> -> <h3>Moved From CSS/background to Web/CSS/background

Inhalt der Version

{{ CSSRef() }}

Ü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
  • berechneter Wert: siehe einzelne Eigenschaften

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 {{ gecko_minversion_inline("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; 

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

{{ HTML5ArticleTOC() }}

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

Quelltext der Version

<p>{{ CSSRef() }}</p>
<h2 id=".C3.9Cbersicht.3A">Übersicht:</h2>
<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>berechneter Wert: siehe einzelne Eigenschaften</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<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>
<h2 id="Werte">Werte</h2>
<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>
<h2 id="Beispiele">Beispiele</h2>
<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>
<h3 id="Einfache_Hintergrundfarbe">Einfache Hintergrundfarbe</h3>
<pre>
background: yellow;
</pre>
<h3 id="Einzelnes_Hintergrundbild">Einzelnes Hintergrundbild</h3>
<pre>
background: url(images/topquote.png) #c6c6c6 top left no-repeat;
padding: 15px;
width: 300px;
</pre>
<h3 id="Mehrere_Hintergr.C3.BCnde_.7B.7B_gecko_minversion_inline(.221.9.2.22)_.7D.7D">Mehrere Hintergründe {{ gecko_minversion_inline("1.9.2") }}</h3>
<pre>
background: url(images/topquote.png) top left no-repeat, 
            url(images/topquote.png) #c6c6c6 bottom right no-repeat;
padding: 15px;
width: 300px; 
</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>
<h2 id="Browser_Kompatibilit.C3.A4t">Browser <span>Kompatibilität</span></h2>
<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>
<h2 id="Spezifikation">Spezifikation</h2>
<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>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
 <li><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-image" title="de/CSS/background-image"><code>background-image</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>
</ul>
<p>{{ HTML5ArticleTOC() }}</p>
<p>{{ languages( { "en": "en/CSS/background", "es": "es/CSS/background", "fr": "fr/CSS/background", "it": "it/CSS/background", "ja": "ja/CSS/background", "ko": "ko/CSS/background", "pl": "pl/CSS/background", "zh-cn": "cn/CSS/background" } ) }}</p>
Zu dieser Version zurücksetzen