---
title: background
slug: Web/CSS/background
tags:
  - CSS
  - CSS Background
  - CSS Eigenschaft
  - CSS Hintergrund
  - Referenz
translation_of: Web/CSS/background
---
<div>
<p>{{CSSRef("CSS Background")}}</p>

<p><span class="seoSummary">Die <a href="/de/docs/Web/CSS">CSS</a> <a href="/de/docs/Web/CSS/Kurzformat_Eigenschaft">Kurzformat</a>-Eigenschaft <strong><code>background</code></strong>setzt alle Hintergrundstileigenschaften auf einmal, wie Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode.</span></p>

<div>{{EmbedInteractiveExample("pages/css/background.html")}}</div>

<div class="hidden">Die Quelle für dieses interaktive Beispiel ist in einem GitHub-Repository gespeichert. Wenn Sie zum Projekt der interaktiven Beispiele beitragen möchten, klonen Sie bitte <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> und senden Sie uns eine Pull-Anfrage.</div>

<h2 id="Eigenschaftsbestandteile">Eigenschaftsbestandteile</h2>

<p>Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:</p>

<ul>
 <li>{{cssxref("background-attachment")}}</li>
 <li>{{cssxref("background-clip")}}</li>
 <li>{{cssxref("background-color")}}</li>
 <li>{{cssxref("background-image")}}</li>
 <li>{{cssxref("background-origin")}}</li>
 <li>{{cssxref("background-position")}}</li>
 <li>{{cssxref("background-repeat")}}</li>
 <li>{{cssxref("background-size")}}</li>
</ul>
</div>

<h2 id="Syntax">Syntax</h2>

<pre class="brush: css notranslate">/* Verwendung von &lt;background-color&gt; */
background: green;

/* Verwendung von &lt;bg-image&gt; und &lt;repeat-style&gt; */
background: url("test.jpg") repeat-y;

/* Verwendung von &lt;box&gt; und &lt;background-color&gt; */
background: border-box red;

/* Ein einzelnes Bild, zentriert und skaliert */
background: no-repeat center/80% url("../img/image.png");
</pre>

<p>Die Eigenschaft <code>background</code> wird als eine oder mehrere Hintergrundebenen, durch Kommata getrennt, angegeben.</p>

<p>Die Syntax der einzelnen Schichten ist wie folgt:</p>

<ul>
 <li> Jede Schicht kann null oder ein Vorkommen eines der folgenden Werte enthalten:
  <ul>
   <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;attachment>">&lt;attachment&gt;</a></code></li>
   <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;bg-image>">&lt;bg-image&gt;</a></code></li>
   <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;position>">&lt;position&gt;</a></code></li>
   <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;bg-size>">&lt;bg-size&gt;</a></code></li>
   <li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;repeat-style>">&lt;repeat-style&gt;</a></code></li>
  </ul>
 </li>
 <li>Der Wert <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;bg-size>">&lt;bg-size&gt;</a></code>  darf nur unmittelbar nach <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;position>">&lt;position&gt;</a></code>, getrennt durch das Zeichen '/', wie folgt eingefügt werden: "<code>center/80%</code>".</li>
 <li>Der Wert <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;box>">&lt;box&gt;</a></code> kann Null, eins oder zwei Mal eingeschlossen werden. Wenn er einmal eingeschlossen wird, setzt er sowohl {{cssxref("background-origin")}} als auch {{cssxref("background-clip")}}. Bei zweimaligem Einschließen setzt das erste Vorkommen {{cssxref("background-origin")}} und das zweite Vorkommen {{cssxref("background-clip")}}.</li>
 <li>Der Wert <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#&lt;background-color>">&lt;background-color&gt;</a></code> darf nur in der zuletzt angegebenen Ebene enthalten sein.</li>
</ul>

<div class="note"><strong>Hinweis:</strong> Die {{cssxref("background-color")}} kann nur für den letzten Hintergrund definiert werden, da es nur eine Hintergrundfarbe für das gesamte Element gibt.</div>

<h3 id="Werte">Werte</h3>

<p>Einer oder mehrere der folgenden Werte, in beliebiger Reihenfolge:</p>

<dl>
 <dt><code>&lt;attachment&gt;</code></dt>
 <dd>Siehe {{cssxref("background-attachment")}}</dd>
 <dt><code>&lt;box&gt;</code></dt>
 <dd>Siehe {{cssxref("background-clip")}} and {{cssxref("background-origin")}}</dd>
 <dt><code>&lt;background-color&gt;</code></dt>
 <dd>Siehe {{cssxref("background-color")}}</dd>
 <dt><code>&lt;bg-image&gt;</code></dt>
 <dd>See {{Cssxref("background-image")}}</dd>
 <dt><code>&lt;position&gt;</code></dt>
 <dd>Siehe {{cssxref("background-position")}}</dd>
 <dt><code>&lt;repeat-style&gt;</code></dt>
 <dd>Siehe {{cssxref("background-repeat")}}</dd>
 <dt><code>&lt;bg-size&gt;</code></dt>
 <dd>Siehe {{cssxref("background-size")}}.</dd>
</dl>

<h2 id="Bedenken_zur_Zugänglichkeit">Bedenken zur Zugänglichkeit</h2>

<p>Browser bieten keine speziellen Informationen über Hintergrundbilder zu unterstützenden Technologien. Dies ist vor allem für Bildschirmleseprogramme wichtig, da ein Bildschirmleseprogramm seine Anwesenheit nicht ankündigt und seinen Benutzern daher nichts vermittelt. Wenn das Bild Informationen enthält, die für das Verständnis des Gesamtzwecks der Seite entscheidend sind, ist es besser, diese im Dokument semantisch zu beschreiben.</p>

<ul>
 <li><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_%E2%80%94_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
 <li><a href="https://www.w3.org/TR/2016/NOTE-UNDERSTANDING-WCAG20-20161007/text-equiv-all.html">Understanding Success Criterion 1.1.1 | W3C Understanding WCAG 2.0</a></li>
</ul>

<h2 id="Formale_Definition">Formale Definition</h2>

<p>{{cssinfo}}</p>

<h2 id="Formale_Syntax">Formale Syntax</h2>

{{csssyntax}}

<h2 id="Beispiele">Beispiele</h2>

<h3 id="Setting_backgrounds_with_color_keywords_and_images" name="Setting_backgrounds_with_color_keywords_and_images">Hintergründe mit farbigen Schlüsselwörtern und Bildern setzen</h3>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;p class="topbanner"&gt;
  Starry sky&lt;br/&gt;
  Twinkle twinkle&lt;br/&gt;
  Starry sky
&lt;/p&gt;
&lt;p class="warning"&gt;Here is a paragraph&lt;p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush:css' highlight:[2,6]; notranslate">.warning {
  background: pink;
}

.topbanner {
  background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed;
}
</pre>

<h4 id="Ergebnis">Ergebnis</h4>

<p>{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}</p>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}</td>
   <td>{{Spec2('CSS3 Backgrounds')}}</td>
   <td>Die Kurzformat-Eigenschaft wurde erweitert, sodass sie mehrere Hintergründe und die neuen Eigenschaften {{cssxref("background-size")}}, {{cssxref("background-origin")}} und {{cssxref("background-clip")}} unterstützt.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Keine wesentlichen Änderungen</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#background', 'background')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Ursprüngliche Definition</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser-Kompatibilität">Browser-Kompatibilität</h2>

<div>

<p>{{Compat("css.properties.background")}}</p>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li>{{cssxref("-moz-background-inline-policy")}}</li>
 <li><a href="/de/docs/Farbverläufe_in_CSS">Verwendung von CSS Farbverläufen</a></li>
 <li><a href="/de/docs/Web/Guide/CSS/mehrere_Hintergründe_verwenden">Mehrere Hintergründe in CSS verwenden</a></li>
</ul>