From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/de/web/css/background/index.html | 182 +++++++++++++++++++++++++++++++++ 1 file changed, 182 insertions(+) create mode 100644 files/de/web/css/background/index.html (limited to 'files/de/web/css/background/index.html') diff --git a/files/de/web/css/background/index.html b/files/de/web/css/background/index.html new file mode 100644 index 0000000000..d4e50112d0 --- /dev/null +++ b/files/de/web/css/background/index.html @@ -0,0 +1,182 @@ +--- +title: background +slug: Web/CSS/background +tags: + - CSS + - CSS Background + - CSS Eigenschaft + - CSS Hintergrund + - Referenz +translation_of: Web/CSS/background +--- +
+

{{CSSRef("CSS Background")}}

+ +

Die CSS Kurzformat-Eigenschaft backgroundsetzt alle Hintergrundstileigenschaften auf einmal, wie Farbe, Bild, Ursprung und Größe oder Wiederholungsmethode.

+ +
{{EmbedInteractiveExample("pages/css/background.html")}}
+ + + +

Eigenschaftsbestandteile

+ +

Diese Eigenschaft ist eine Kurzform für die folgenden CSS-Eigenschaften:

+ + +
+ +

Syntax

+ +
/* 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");
+
+ +

Die Eigenschaft background wird als eine oder mehrere Hintergrundebenen, durch Kommata getrennt, angegeben.

+ +

Die Syntax der einzelnen Schichten ist wie folgt:

+ + + +
Hinweis: Die {{cssxref("background-color")}} kann nur für den letzten Hintergrund definiert werden, da es nur eine Hintergrundfarbe für das gesamte Element gibt.
+ +

Werte

+ +

Einer oder mehrere der folgenden Werte, in beliebiger Reihenfolge:

+ +
+
<attachment>
+
Siehe {{cssxref("background-attachment")}}
+
<box>
+
Siehe {{cssxref("background-clip")}} and {{cssxref("background-origin")}}
+
<background-color>
+
Siehe {{cssxref("background-color")}}
+
<bg-image>
+
See {{Cssxref("background-image")}}
+
<position>
+
Siehe {{cssxref("background-position")}}
+
<repeat-style>
+
Siehe {{cssxref("background-repeat")}}
+
<bg-size>
+
Siehe {{cssxref("background-size")}}.
+
+ +

Bedenken zur Zugänglichkeit

+ +

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.

+ + + +

Formale Definition

+ +

{{cssinfo}}

+ +

Formale Syntax

+ +
{{csssyntax}}
+ +

Beispiele

+ +

Hintergründe mit farbigen Schlüsselwörtern und Bildern setzen

+ +

HTML

+ +
<p class="topbanner">
+  Starry sky<br/>
+  Twinkle twinkle<br/>
+  Starry sky
+</p>
+<p class="warning">Here is a paragraph<p>
+ +

CSS

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

Ergebnis

+ +

{{EmbedLiveSample("Setting_backgrounds_with_color_keywords_and_images")}}

+ +

Spezifikationen

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpezifikationStatusKommentar
{{SpecName('CSS3 Backgrounds', '#the-background', 'background')}}{{Spec2('CSS3 Backgrounds')}}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.
{{SpecName('CSS2.1', 'colors.html#propdef-background', 'background')}}{{Spec2('CSS2.1')}}Keine wesentlichen Änderungen
{{SpecName('CSS1', '#background', 'background')}}{{Spec2('CSS1')}}Ursprüngliche Definition
+ +

Browser-Kompatibilität

+ +
+ + +

{{Compat("css.properties.background")}}

+
+ +

Siehe auch

+ + -- cgit v1.2.3-54-g00ecf