Contain en cover voor achtergronden

background-size bepaalt de grootte van een CSS-achtergrondafbeelding. Met contain past de hele afbeelding binnen het beschikbare vlak met behoud van verhouding. Met cover wordt het vlak bedekt, waardoor delen van het beeld buiten het zicht kunnen vallen.

Kies dus niet alleen op het eerste voorbeeldscherm. Een smalle telefoon kan een andere uitsnede laten zien dan een brede monitor. Met background-position bepaal je waar het beeld in het vlak wordt uitgelijnd. Test of belangrijke decoratieve details nog goed vallen, maar zet essentiële informatie nooit alleen in zo'n achtergrond. Bij contain kan naast het beeld ruimte overblijven; een passende achtergrondkleur vangt dat op.

Voorbeeld

.kaart {
  background-size: cover;
  background-position: center;
}

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