Baggrund - CSS-tricks | CSS Almanak 2025

Den backgroundejendom i CSS giver dig mulighed for at styre baggrund af ethvert element (hvad maling nedenunder indholdet i dette element). Det er en stenografisk egenskab, hvilket betyder, at det giver dig mulighed for at skrive, hvad der ville være flere CSS-egenskaber i en. Sådan her:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background består af otte andre egenskaber:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

Du kan bruge enhver kombination af disse egenskaber, som du kan lide, i næsten enhver rækkefølge (selvom den rækkefølge, der anbefales i specifikationen, er ovenfor). Der er dog en gotcha: Alt, hvad du ikke angiver i backgroundejendommen, indstilles automatisk til dens standard. Så hvis du gør noget som dette:

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Baggrunden vil være gennemsigtig i stedet for rød. Fix er dog let: bare definer background-colorefter background, eller brug bare stenografi (f.eks. background: url(… ) red;)

Flere baggrunde

CSS3 tilføjede understøttelse af flere baggrunde, som lag over toppen af hinanden. Enhver ejendom relateret til baggrunde kan have en komma-adskilt liste som denne:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Hver værdi i den kommaseparerede liste svarer til et lag: den første værdi er det øverste lag, den anden værdi er det andet lag, og baggrundsfarven er altid det sidste lag.

Opskrifter

Se Pen emBzRd af Timothy Miller (@tjacobdesign) på CodePen.

Browsersupport

Support varierer mellem de forskellige specifikke egenskaber, og hver tilsvarende artikel i Almanac har unikke browsersupportnotater. Grundlæggende baggrundsfarver i enkeltfarver og enkeltbilleder fungerer overalt, og alt, hvad der ikke understøttes, falder bare tilbage til det næstbedste, hvad enten det er et billede eller en farve.