Style baggrund egenskab

Definition og brug

background Egenskaben sættes eller returneres i kortform for at maksimalt inkludere otte separate baggrundsegenskaber.

Gennem denne egenskab kan du indstille/returnere følgende en eller flere (i hvilken som helst rækkefølge):

DOM egenskab CSS egenskab
backgroundAttachment baggrundvedhæftning
baggrundbeskæring background-clip
baggrundfarve baggrundfarve
backgroundImage background-image
backgroundOrigin background-origin
backgroundPosition background-position
backgroundRepeat background-repeat
backgroundSize background-size

Disse egenskaber kan også indstilles ved hjælp af separate stilattributter. Det anbefales kraftigt, at ikke-avancerede forfattere bruger separate egenskaber for bedre kontrollabilitet.

Se også:

CSS tutorial:CSS baggrund

CSS tutorial:CSS3 background

CSS reference manual:background-egenskab

Eksempel

Indstil stilen for dokumentets baggrund:

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

Prøv det selv

Der er flere TIY-eksempler nedenfor på siden.

Syntaks

Retur background-egenskaben:

object.style.background

Indstil background-egenskaben:

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

Egenskabsværdi

Værdi Beskrivelse
color Indstil elementets baggrundsfarve.
image Indstil elementets baggrundsbillede.
repeat Indstil gentagelsesmåden for baggrundsbilledet.
attachment Indstil om baggrundsbilledet er fast eller ruller med siden.
position Indstil startpositionen for baggrundsbilledet.
size Indstil størrelsen på baggrundsbilledet.
origin Indstil positioneringsområdet for baggrundsbilledet.
clip Indstil tegnerommet for baggrundsbilledet.
initial Sæt denne egenskab til dens standardværdi. Se initial.
inherit Arv denne egenskab fra sin forældrelige element. Se inherit.

Tekniske detaljer

Standardværdi: transparent none repeat scroll 0% 0% auto padding-box border-box
Returværdi: Streng, der repræsenterer elementets baggrund.
CSS version: CSS1 + nye egenskaber i CSS3

Flere eksempler

Eksempel 2

ændre DIV-elementets baggrund:

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

Prøv det selv

Eksempel 3

Sætter baggrundsfarven til dokumentet:

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

Prøv det selv

Eksempel 4

Sætter baggrundsbilledet til dokumentet:

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

Prøv det selv

Eksempel 5

Sætter baggrundsbilledet til ikke gentagende:

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

Prøv det selv

Eksempel 6

Sætter baggrundsbilledet til fast (vil ikke rulle):

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

Prøv det selv

Eksempel 7

Ændrer placeringen af baggrundsbilledet:

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

Prøv det selv

Eksempel 8

Returnerer dokumentets baggrundsegenskab værdi:

document.body.style.background;

Prøv det selv

Browser understøttelse

background er en CSS1 (1996) egenskab.

Alle browsere understøtter det fuldt ud:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Support Support Support Support Support Support

Kommentarer

CSS3 (1999) tilføjede tre nye egenskaber: