Een bestand als CSS-achtergrond

background-image voegt een beeldlaag toe aan de achtergrond van een element. De inhoud van het element blijft ervoor staan. Bij een URL in een extern CSS-bestand wordt een relatief pad ten opzichte van dat stylesheetbestand opgelost, niet ten opzichte van de HTML-pagina.

Stel herhaling bewust in. Een klein patroon mag zich herhalen; een enkele illustratie moet dat vaak juist niet. Achtergrondinstellingen geven een leeg element niet vanzelf de gewenste hoogte. Laat de afmetingen voortkomen uit echte inhoud of een duidelijke ontwerpkeuze. Gebruik voor betekenisvolle afbeeldingen liever HTML met een tekstalternatief dan een leeg vlak dat alleen via CSS iets vertelt.

Voorbeeld

.kaart {
  background-image: url("papier.png");
  background-repeat: no-repeat;
}

Naslag: MDN Web Docs over dit onderdeel. De uitleg hierboven is zelfstandig geformuleerd.

Verder binnen dit onderwerp: Contain en cover voor achtergronden.