Style bakgrund egenskap

Definition och användning

background Egenskapen ställs in eller återställs i kortform för att täcka högst åtta enskilda bakgrundsegenskaper.

Genom denna egenskap kan du ställa in/återställa följande en eller flera (i valfritt ordning):

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

Ovanstående egenskaper kan också ställas in med separata stilattribut. Det rekommenderas starkt att avancerade författare använder separata egenskaper för bättre kontroll.

Se också:

CSS-tutorial:CSS bakgrund

CSS3-tutorial:CSS3-bakgrund

CSS-handboken:Bakgrundsegenskap

Exempel

Ställ in stilen för dokumentets bakgrund:

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

Prova själv

Mer TIY-exempel finns längre ner på sidan.

Syntax

Returnera bakgrundsegenskapet:

object.style.background

Ställ in bakgrundsegenskapet:

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

Egenskapsvärde

Värde Beskrivning
color Ställ in bakgrundsfärgen för elementet.
image Ställ in bakgrundsbilden för elementet.
repeat Ställ in upprepningssättet för bakgrundsbilden.
attachment Ställ in om bakgrundsbilden är fast eller rullar med sidan.
position Ställ in startpositionen för bakgrundsbilden.
size Ställ in storleken på bakgrundsbilden.
origin Ställ in positioneringsområdet för bakgrundsbilden.
clip Ställ in ritningsområdet för bakgrundsbilden.
initial Sätt detta egenskap till dess standardvärde. Se till initial.
inherit Inherritar detta egenskap från föräldrelementet. Se till inherit.

Tekniska detaljer

Standardvärde: transparent none repeat scroll 0% 0% auto padding-box border-box
Returvärde: Sträng som representerar elementets bakgrund.
CSS-version: CSS1 + nya egenskaper i CSS3

Fler exempel

Exempel 2

Ändra bakgrund för DIV-elementet:

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

Prova själv

Exempel 3

Sätt bakgrundsfärg för dokumentet:

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

Prova själv

Exempel 4

Sätt bakgrundsbild för dokumentet:

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

Prova själv

Exempel 5

Sätt bakgrundsbilden till att inte upprepa:

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

Prova själv

Exempel 6

Sätt bakgrundsbilden till fast (inte rullande):

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

Prova själv

Exempel 7

Ändra bakgrundsbildens plats:

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

Prova själv

Exempel 8

Returnera bakgrundsegenskapen för dokumentet:

document.body.style.background;

Prova själv

Webbläsarstöd

background är en CSS1 (1996) egenskap.

Alla webbläsare stöder det fullt ut:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Stöd Stöd Stöd Stöd Stöd Stöd

Kommentarer

CSS3 (1999) lade till tre nya egenskaper: