Achtergrond - CSS-trucs | CSS Almanac 2025

Met de backgroundeigenschap in CSS kun je de achtergrond van elk element bepalen (wat er onder de inhoud van dat element tekent). Het is een afgekorte eigenschap, wat betekent dat u hiermee kunt schrijven wat meerdere CSS-eigenschappen in één zouden zijn. Zoals dit:

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 bestaat uit acht andere eigendommen:

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

U kunt elke gewenste combinatie van deze eigenschappen gebruiken, in bijna elke volgorde (hoewel de aanbevolen volgorde in de specificatie hierboven is). Er is echter een probleem: alles wat u niet specificeert in de backgroundeigenschap, wordt automatisch op de standaardwaarde ingesteld. Dus als je zoiets als dit doet:

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

De achtergrond is transparant in plaats van rood. De oplossing is echter eenvoudig: definieer gewoon background-colorna background, of gebruik gewoon de afkorting (bijv. background: url(… ) red;)

Meerdere achtergronden

CSS3 heeft ondersteuning toegevoegd voor meerdere achtergronden, die over elkaar heen liggen. Elke eigenschap met betrekking tot achtergronden kan een door komma's gescheiden lijst hebben, zoals deze:

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

Elke waarde in de door komma's gescheiden lijst komt overeen met een laag: de eerste waarde is de bovenste laag, de tweede waarde is de tweede laag en de achtergrondkleur is altijd de laatste laag.

Recepten

Zie de Pen emBzRd door Timothy Miller (@tjacobdesign) op CodePen.

Browser-ondersteuning

Ondersteuning varieert tussen de verschillende specifieke eigenschappen, en elk overeenkomstig artikel in de Almanac heeft unieke browserondersteuningsnotities. Basisachtergronden in één kleur en afzonderlijke afbeeldingen werken echter overal, en alles dat niet wordt ondersteund, valt terug op het op één na beste, of dat nu een afbeelding of een kleur is.