Bakgrund - CSS-tricks | CSS Almanack 2025

Den backgroundegendom i CSS kan du styra bakgrund av alla element (vad färger under innehållet i det element). Det är en stenografisk egenskap, vilket innebär att den låter dig skriva vad som skulle vara flera CSS-egenskaper i en. Så här:

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 av åtta andra egenskaper:

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

Du kan använda valfri kombination av dessa egenskaper som du gillar, i nästan vilken ordning som helst (även om den ordning som rekommenderas i specifikationen är ovan). Det finns dock en gotcha: allt du inte anger i backgroundfastigheten ställs automatiskt in som standard. Så om du gör något så här:

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

Bakgrunden blir transparent istället för röd. Fixen är dock lätt: definiera bara background-colorefter background, eller använd bara stenografi (t.ex. background: url(… ) red;)

Flera bakgrunder

CSS3 lade till stöd för flera bakgrunder, som lagras över varandra. Alla egenskaper som är relaterade till bakgrunder kan ha en kommaseparerad lista, så här:

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

Varje värde i den kommaavgränsade listan motsvarar ett lager: det första värdet är det översta lagret, det andra värdet är det andra lagret och bakgrundsfärgen är alltid det sista lagret.

Recept

Se pennan emBzRd av Timothy Miller (@tjacobdesign) på CodePen.

Webbläsarstöd

Support varierar mellan olika specifika egenskaper, och varje motsvarande artikel i Almanac har unika webbläsarstödanteckningar. Grundläggande enfärgade bakgrunder och enstaka bilder fungerar dock överallt, och allt som inte stöds faller bara tillbaka till det näst bästa, oavsett om det är en bild eller en färg.