Bakgrunn - CSS-triks | CSS-almanakk 2025

Den backgroundeiendom i CSS kan du styre bakgrunnen for ethvert element (hva maling under innholdet i det elementet). Det er en stenografisk eiendom, som betyr at den lar deg skrive hva som ville være flere CSS-egenskaper i en. Som dette:

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 åtte andre egenskaper:

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

Du kan bruke en hvilken som helst kombinasjon av disse egenskapene du liker, i nesten hvilken som helst rekkefølge (selv om rekkefølgen anbefalt i spesifikasjonen er ovenfor). Det er imidlertid en gotcha: alt du ikke angir i backgroundeiendommen blir automatisk satt til standard. Så hvis du gjør noe slikt:

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

Bakgrunnen vil være gjennomsiktig, i stedet for rød. Løsningen er likevel enkel: bare definer background-coloretter background, eller bare bruk stenografi (f.eks. background: url(… ) red;)

Flere bakgrunner

CSS3 la til støtte for flere bakgrunner, som lag over hverandre. Enhver eiendom relatert til bakgrunn kan ta en kommaadskilt liste, slik:

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

Hver verdi i den kommaseparerte listen tilsvarer et lag: den første verdien er det øverste laget, den andre verdien er det andre laget, og bakgrunnsfargen er alltid det siste laget.

Oppskrifter

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

Nettleserstøtte

Støtte varierer mellom de forskjellige spesifikke egenskapene, og hver tilsvarende artikkel i Almanac har unike nettstøtterotater. Grunnleggende enfarget bakgrunn og enkeltbilder fungerer overalt, og alt som ikke støttes, faller bare tilbake til det nest beste, enten det er et bilde eller en farge.