CSS background-size property

Definition og brug

background-size Egenskaben definerer baggrundsbilledets størrelse.

Se også:

CSS vejledning:CSS baggrund,CSS baggrund (avanceret)

HTML DOM referencehåndbog:backgroundSize egenskab

Eksempel

Definerer baggrundsbilledets størrelse:

div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}

Prøv det selv

CSS syntaks

background-size: length|percentage|cover|contain;

Egenskabsværdi

Værdi Beskrivelse Test
length

Indstil baggrundsbilledets højde og bredde.

Den første værdi indstiller bredden, den anden værdi indstiller højden.

Hvis kun én værdi angives, vil den anden værdi blive sat til "auto".

 Test
percentage

Indstil baggrundsbilledets bredde og højde som en procentdel af forældreelementet.

Den første værdi indstiller bredden, den anden værdi indstiller højden.

Hvis kun én værdi angives, vil den anden værdi blive sat til "auto".

 Test
cover

Udvid baggrundsbilledet tilstrækkeligt, så baggrundsbilledet fuldt dækker baggrundsområdet.

Nogle dele af baggrundsbilledet kan måske ikke vises i baggrundslayoutområdet.

 Test
contain Udvid billedet til den største størrelse for at gøre billedets bredde og højde helt tilpas til indholdsområdet. Test

Tekniske detaljer

Standardværdi: auto
Arv: nej
Version: CSS3
JavaScript syntaks: object.style.backgroundSize="60px 80px"

Flere eksempler

Stræk baggrundsbilledet
Stræk baggrundsbilledet for at fuldt dække indholdsområdet.
Stræk baggrundsbilledet for at kopiere baggrundsbilledet vandret fire gange
Stræk baggrundsbilledet for at gøre baggrundsbilledet nøjagtigt kopieret vandret fire gange.

Browserunderstøttelse

Tabelens tal angiver den første browserversion, der fuldt ud understøtter egenskaben.

Chrome Edge Firefox Safari Opera
Chrome IE / Edge Firefox Safari Opera
4.0
1.0 -webkit-		 9.0 4.0
3.6 -moz-		 4.1
3.0 -webkit-		 10.5
10.0 -o-