Style background Eigenschaft

Definition und Verwendung

background Eigenschaften können in Kurzform maximal acht einzelne Hintergrundeigenschaften setzen/zurückgeben.

Mit dieser Eigenschaft können Sie die folgenden eine oder mehrere (in beliebiger Reihenfolge) setzen/zurückgeben:

DOM-Eigenschaft CSS-Eigenschaft
backgroundAttachment background-attachment
backgroundClip background-clip
backgroundColor background-color
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Diese Attribute können auch mit separaten Stileigenschaften eingestellt werden. Es wird dringend empfohlen, dass nicht fortgeschrittene Autoren separate Attribute verwenden, um eine bessere Kontrolle zu erlangen.

Weitere Informationen:

CSS-Tutorial:CSS-Hintergrund

CSS3-Tutorial:CSS3-Hintergrund

CSS-Referenzhandbuch:background-Attribut

Beispiel

Stellen Sie das Stile für den Hintergrund der Dokument ein:

document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right top";

Versuchen Sie es selbst

Unten gibt es mehr TIY-Beispiele.

Syntax

Rückgabe des background-Attributs:

object.style.background

Stellen Sie das background-Attribut ein:

object.style.background = "color image repeat attachment position size origin clip|initial|inherit"

Attributwert

Wert Beschreibung
color Stellen Sie die Hintergrundfarbe des Elements ein.
image Stellen Sie das Hintergrundbild des Elements ein.
repeat Stellen Sie die Wiederholungsmethode des Hintergrundbildes ein.
attachment Stellen Sie ein, ob das Hintergrundbild fest ist oder mit der Seite scrollt.
position Stellen Sie den Startpunkt des Hintergrundbildes ein.
size Stellen Sie die Größe des Hintergrundbildes ein.
origin Stellen Sie den Positionierungsbereich des Hintergrundbildes ein.
clip Stellen Sie den Zeichnungsbereich des Hintergrundbildes ein.
initial Setzen Sie diesen Attributwert auf seinen Standardwert. Siehe initial.
inherit Erben Sie diesen Attributwert von ihrem übergeordneten Element. Siehe inherit.

Technische Details

Standardwert: transparent none repeat scroll 0% 0% auto padding-box border-box
Rückgabewert: Zeichenkette, die das Hintergrunddesign des Elements darstellt.
CSS-Version: CSS1 + neue Eigenschaften in CSS3

Mehr Beispiele

Beispiel 2

Ändern Sie das Hintergrunddesign des DIV-Elements:

document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";

Versuchen Sie es selbst

Beispiel 3

Setzt die Hintergrundfarbe des Dokuments fest:

document.body.style.backgroundColor = "red";

Versuchen Sie es selbst

Beispiel 4

Setzt das Hintergrundbild des Dokuments fest:

document.body.style.backgroundImage = "url('img_tree.png')";

Versuchen Sie es selbst

Beispiel 5

Setzt das Hintergrundbild auf nicht wiederholend:

document.body.style.backgroundRepeat = "repeat-y";

Versuchen Sie es selbst

Beispiel 6

Setzt das Hintergrundbild auf fest (bewegt sich nicht mit dem Scrollen):

document.body.style.backgroundAttachment = "fixed";

Versuchen Sie es selbst

Beispiel 7

Verändert den Standort des Hintergrundbildes:

document.body.style.backgroundPosition = "top right";

Versuchen Sie es selbst

Beispiel 8

Gibt den Wert der Hintergrundeigenschaft des Dokuments zurück:

document.body.style.background;

Versuchen Sie es selbst

Browser-Unterstützung

background Es ist eine Eigenschaft von CSS1 (1996).

Alle Browser unterstützen es vollständig:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung

Kommentare

CSS3 (1999) fügte drei neue Eigenschaften hinzu: