CSS-achtergronden: kleuren, verlopen en afbeeldingen gelaagd

Een CSS-achtergrond is een stapel lagen op één element. De eigenschap background accepteert een door komma’s gescheiden lijst met afbeeldingen en verlopen, waarvan de eerste bovenop wordt getekend, plus één kleur helemaal onderaan. Meer heb je niet nodig voor een getinte hero-foto, een zacht licht over een verloop of een textuur over een merkkleur, zonder extra elementen of wrappers. De rest is weten hoe de shorthand zijn waarden leest.

De background-shorthand, waarde voor waarde

De shorthand stelt tot acht longhand-eigenschappen tegelijk in. Alles wat je weglaat wordt teruggezet naar de standaardwaarde, en dat is de meest voorkomende oorzaak van bugs als “waarom is mijn achtergrondgrootte verdwenen”.

.hero {
  /* image | position / size | repeat | colour */
  background: url("harbour.webp") center 30% / cover no-repeat #0f172a;
}

Hoe achtergrondlagen stapelen

Noem de lagen van boven naar beneden, gescheiden door komma’s. Elke laag kan een eigen positie, grootte en herhaling hebben, in dezelfde volgorde opgegeven in elke longhand. Alleen de laatste laag mag een kleur bevatten. Zie het als door een stapel overtrekpapier kijken.

.section {
  background:
    radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%),
    radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%),
    linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)
    #0f0b1e;
}

Gebruik transparent in de buitenste stops zodat lichten overvloeien in wat eronder ligt. Voor de vormen zelf, zie CSS radial gradient en CSS mesh gradient.

Een verloop over een achtergrondafbeelding

De nuttigste gelaagde achtergrond tint een foto zodat tekst erop leesbaar is. Zet eerst een verloopslaag en dan de afbeelding. Een verloop dat donker is waar de tekst staat en helder elders, behoudt veel meer van de foto dan een vlakke donkere overlay.

.hero {
  background:
    linear-gradient(90deg, rgb(10 12 24 / 0.85) 0%, rgb(10 12 24 / 0.4) 45%, transparent 70%),
    url("terrace.webp") center / cover no-repeat
    #0a0c18;
  color: #f8fafc;
}

Gradient overlay heeft meer overlay-recepten, en tekst over een afbeelding behandelt wanneer je beter de woorden verplaatst dan het beeld verdonkert.

background-size, position en repeat

• cover vult de box en snijdt af wat uitsteekt. Goed voor foto’s en hero’s die tot de rand doorlopen.
• contain past de hele afbeelding erin en laat ruimte open. Goed voor logo’s en illustraties die niet bijgesneden mogen worden.
• Combineer cover met een bewuste background-position zoals 50% 30%, zodat de uitsnede het gezicht van het onderwerp of het product in beeld houdt.
• Texturen als tegels willen repeat en een vaste grootte, bijvoorbeeld 200px 200px, zodat de korrel op elke schermbreedte gelijk blijft.
• background-attachment: fixed geeft op desktop een parallax-effect, maar veel mobiele browsers negeren het, dus reken er nooit op.

.card {
  background:
    url("grain.png") 0 0 / 200px 200px repeat,
    linear-gradient(135deg, #7c2d12 0%, #ea580c 55%, #fdba74 100%);
}

Nog een longhand verdient een plek: background-clip: text snijdt de achtergrond bij tot de vorm van de letters, zo maak je verloopletters in CSS. Bewaar het voor grote koppen, stel een effen color als terugval in, en zie CSS-verlooptekst voor het volledige patroon.

Fouten om te vermijden

Responsieve en snelle achtergrondafbeeldingen

Met image-set() kiest de browser tussen formaten of resoluties, net als srcset op een img. En omdat achtergrondafbeeldingen pas worden ontdekt zodra de CSS is geparsed, kan een hero-achtergrond laat binnenkomen; een preload-hint in de head lost dat op.

<link rel="preload" as="image" href="/hero-1920.avif" type="image/avif" fetchpriority="high">

<style>
  .hero {
    background: image-set(
      url("/hero-1920.avif") type("image/avif"),
      url("/hero-1920.webp") type("image/webp"),
      url("/hero-1920.jpg") type("image/jpeg")
    ) center / cover no-repeat #0f172a;
  }
</style>

Vaak is de snelste achtergrond helemaal geen afbeelding. Gelaagde verlopen kosten geen download, en een piepkleine korreltegel voegt textuur toe voor een paar kilobyte. CSS-verloopprestaties en WebP versus PNG en JPG behandelen de afwegingen. Wil je licht en korrel liever niet met de hand afstellen, dan geeft een Gradiently Mark je een afgewerkte, onderscheidende achtergrond op het hero-formaat van 1920×1080, in dezelfde stijl als je social posts.