1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
|
---
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 <background-color> */
background: green;
/* Verwendung von <bg-image> und <repeat-style> */
background: url("test.jpg") repeat-y;
/* Verwendung von <box> und <background-color> */
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#<attachment>"><attachment></a></code></li>
<li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<bg-image>"><bg-image></a></code></li>
<li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<position>"><position></a></code></li>
<li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<bg-size>"><bg-size></a></code></li>
<li><code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<repeat-style>"><repeat-style></a></code></li>
</ul>
</li>
<li>Der Wert <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<bg-size>"><bg-size></a></code> darf nur unmittelbar nach <code><a href="https://wiki.developer.mozilla.org/de/docs/Web/CSS/background$edit#<position>"><position></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#<box>"><box></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#<background-color>"><background-color></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><attachment></code></dt>
<dd>Siehe {{cssxref("background-attachment")}}</dd>
<dt><code><box></code></dt>
<dd>Siehe {{cssxref("background-clip")}} and {{cssxref("background-origin")}}</dd>
<dt><code><background-color></code></dt>
<dd>Siehe {{cssxref("background-color")}}</dd>
<dt><code><bg-image></code></dt>
<dd>See {{Cssxref("background-image")}}</dd>
<dt><code><position></code></dt>
<dd>Siehe {{cssxref("background-position")}}</dd>
<dt><code><repeat-style></code></dt>
<dd>Siehe {{cssxref("background-repeat")}}</dd>
<dt><code><bg-size></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>
<pre class="syntaxbox notranslate">{{csssyntax}}</pre>
<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"><p class="topbanner">
Starry sky<br/>
Twinkle twinkle<br/>
Starry sky
</p>
<p class="warning">Here is a paragraph<p></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>
<div class="hidden">Die Kompatibilitätstabelle auf dieser Seite wird aus strukturierten Daten generiert. Wenn Sie zu den Daten beitragen möchten, besuchen Sie bitte <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> und senden Sie uns eine Pull-Anfrage.</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>
|
