Style- Hintergrund -Eigenschaft
Beispiel
Gestalten Sie den Hintergrund eines Dokuments:
document.body.style.background = "#f3f3f3 url('img_tree.png') no-repeat right
top";
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die Hintergrundeigenschaft legt bis zu acht separate Hintergrundeigenschaften in Kurzform fest oder gibt sie zurück.
Mit dieser Eigenschaft können Sie einen oder mehrere der folgenden Werte festlegen/zurückgeben (in beliebiger Reihenfolge):
- Hintergrundfarbe
- Hintergrundbild
- Hintergrund Wiederholung
- Hintergrund-Anhang
- Hintergrund-Position
- Hintergrundgröße
- Hintergrund-Herkunft
- Hintergrund-Clip
Die obigen Eigenschaften können auch mit separaten Stileigenschaften festgelegt werden. Die Verwendung separater Eigenschaften wird für nicht fortgeschrittene Autoren zur besseren Kontrollierbarkeit dringend empfohlen.
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
| Property | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Hinweis: Siehe individuelle Browserunterstützung für jeden Wert unten.
Syntax
Gibt die Hintergrundeigenschaft zurück:
object.style.background
Legen Sie die Hintergrundeigenschaft fest:
object.style.background = "color image
repeat attachment position size origin clip|initial|inherit"
Eigenschaftswerte
| Value | Description |
|---|---|
| color | Sets the background color of an element |
| image | Sets the background image for an element |
| repeat | Sets how a background image will be repeated |
| attachment | Sets whether a background image is fixed or scrolls with the page |
| position | Sets the starting position of a background image |
| size | Sets the size of a background image |
| origin | Sets the background positioning area |
| clip | Sets the painting area of a background image |
| initial | Sets this property to its default value. Read about initial |
| inherit | Inherits this property from its parent element. Read about inherit |
Technische Details
| Standardwert: | transparent keine Bildlauf wiederholen 0 % 0 % Autom. Auffüllbox Randbox |
|---|---|
| Rückgabewert: | Ein String, der den Hintergrund eines Elements darstellt |
| CSS-Version | CSS1 + neue Eigenschaften in CSS3 |
Mehr Beispiele
Beispiel
Ändern Sie den Hintergrund eines DIV-Elements:
document.getElementById("myDIV").style.background = "url('smiley.gif') blue repeat-x center";
Beispiel
Legen Sie eine Hintergrundfarbe für ein Dokument fest:
document.body.style.backgroundColor = "red";
Beispiel
Legen Sie ein Hintergrundbild für ein Dokument fest:
document.body.style.backgroundImage = "url('img_tree.png')";
Beispiel
Setzen Sie ein Hintergrundbild auf keine Wiederholung:
document.body.style.backgroundRepeat = "repeat-y";
Beispiel
Festlegen des Hintergrundbildes (wird nicht scrollen):
document.body.style.backgroundAttachment = "fixed";
Beispiel
Position eines Hintergrundbildes ändern:
document.body.style.backgroundPosition = "top right";
Beispiel
Gibt die Hintergrundeigenschaftswerte eines Dokuments zurück:
document.body.style.background;
Verwandte Seiten
CSS-Tutorial: CSS-Hintergrund
CSS3-Tutorial: CSS3-Hintergründe
CSS-Referenz: Hintergrundeigenschaft