# CSS-achtergronden: kleuren, verlopen en afbeeldingen gelaagd

[Canonical HTML page](https://gradiently.design/nl/guide/css-background-image)

Eén eigenschap kan een foto bevatten, een tint erover, een zacht licht in de hoek en een terugvalkleur eronder. Zodra de laagvolgorde klikt, kost de meeste achtergrondeffecten één regel.

## The short version

- De CSS-eigenschap background kan meerdere lagen bevatten, gescheiden door komma’s, en de eerst genoemde laag wordt bovenop getekend.
- Een achtergrondkleur kun je maar één keer instellen, in de laatste laag, en die is zichtbaar onder elke afbeelding en elk verloop.
- In de background-shorthand moet background-size na background-position komen, met een schuine streep ertussen, zoals in center / cover.
- Een verloop boven een afbeeldingslaag plaatsen in één declaratie is de eenvoudigste manier om een foto te tinten voor leesbare tekst.
- Afbeeldingen die in CSS zijn ingesteld worden later ontdekt dan img-elementen, dus een belangrijke hero-afbeelding kan een preload-hint nodig hebben.

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”.

| Longhand | Wat het regelt | Veelgebruikte waarden |
| --- | --- | --- |
| `background-color` | De kleur onder elke laag | `#0f0b1e`, `oklch(20% 0.05 290)` |
| `background-image` | Afbeeldingen en verlopen, gescheiden door komma’s | `url(photo.webp)`, `linear-gradient(…)` |
| `background-position` | Waar elke laag staat | `center`, `top right`, `50% 30%` |
| `background-size` | Hoe groot elke laag is | `cover`, `contain`, `200px auto` |
| `background-repeat` | Of hij wordt herhaald | `no-repeat`, `repeat`, `repeat-x` |
| `background-attachment` | Scrolt mee met het element of het venster | `scroll`, `fixed`, `local` |
| `background-origin` en `background-clip` | Vanaf welke box hij begint en waartoe hij wordt bijgesneden | `padding-box`, `border-box`, `text` |

Volledige referentie op [de background-pagina van MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/background).

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

De schuine streep is verplicht: de grootte kan alleen direct na de positie staan. De kleur komt als laatste en is zichtbaar terwijl de afbeelding laadt.

## 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.

- Laag 1: roze licht: `radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%)`
- Laag 2: blauw licht: `radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%)`
- Laag 3: indigo ondergrond: `linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)`

Drie lagen afzonderlijk getoond. De eerste twee lopen uit naar transparant, zodat de ondergrond overal doorschijnt waar ze niet tekenen.

```css
.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;
}
```

Dezelfde drie lagen gestapeld in één declaratie, de bovenste eerst, met een effen terugvalkleur onderaan.

Gebruik `transparent` in de buitenste stops zodat lichten overvloeien in wat eronder ligt. Voor de vormen zelf, zie [CSS radial gradient](https://gradiently.design/nl/guide/css-radial-gradient) en [CSS mesh gradient](https://gradiently.design/nl/guide/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.

```css
.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;
}
```

Donker links waar de kop staat, helder rechts waar de foto te zien moet zijn.

Een brede website-hero met een kop over een gelijkmatig verdonkerde achtergrond

Een vlakke overlay maakt tekst leesbaar door alles even sterk te dimmen.

Dezelfde hero waarbij alleen de kant achter de kop rustiger en donkerder is

Een gerichte laag verdonkert alleen waar de woorden staan en laat de rest van het tafereel helder.

[Gradient overlay](https://gradiently.design/nl/guide/gradient-overlay) heeft meer overlay-recepten, en [tekst over een afbeelding](https://gradiently.design/nl/guide/text-over-image) 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.

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

Een kleine herhalende korreltegel over een warm verloop. Instellingen per laag volgen elke afbeelding, dus het verloop blijft onaangetast door de tegelgrootte.

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](https://gradiently.design/nl/guide/css-gradient-text) voor het volledige patroon.

## Fouten om te vermijden

### Vermijd

- `background-size` instellen en daarna de shorthand, waardoor die wordt gereset
- Een kleur in een andere laag dan de laatste
- Geen terugvalkleur, waardoor tekst onleesbaar is terwijl de afbeelding laadt
- Een enorme foto voor een box van 400 pixels breed
- Belangrijke inhoud alleen in een achtergrondafbeelding, onzichtbaar voor schermlezers

### Doe

- Schrijf eerst de shorthand, daarna eventuele longhand-overschrijvingen
- Eén kleur, aan het einde van de lijst
- Een terugvalkleur dicht bij de gemiddelde toon van de afbeelding
- Afbeeldingen op maat van de box, geleverd als WebP of AVIF
- Betekenisvolle afbeeldingen als `img` met alt-tekst; decoratie als achtergrond

## 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.

```html
<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>
```

De browser neemt het eerste formaat dat hij ondersteunt. De preload zorgt dat de hoofdafbeelding vroeg begint te downloaden.

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](https://gradiently.design/nl/guide/css-gradient-performance) en [WebP versus PNG en JPG](https://gradiently.design/nl/guide/webp-images) 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.

## FAQ

### Hoe voeg ik een achtergrondafbeelding toe in CSS?

Gebruik `background: url("image.webp") center / cover no-repeat;` op het element, met aan het eind een terugvalkleur voor het geval de afbeelding traag laadt.

### Hoe zet ik een verloop over een achtergrondafbeelding?

Noem het verloop eerst en de afbeelding daarna in één `background`-declaratie, gescheiden door een komma. De eerste laag wordt bovenop getekend.

### Kan ik meerdere achtergronden gebruiken in CSS?

Ja. Scheid lagen met komma’s; elke laag kan een eigen positie, grootte en herhaling hebben, en alleen de laatste laag mag een kleur bevatten.

### Wat is het verschil tussen background-size cover en contain?

`cover` vult het hele element en snijdt af wat uitsteekt; `contain` toont de hele afbeelding en kan lege ruimte eromheen laten.

### Waarom werkt mijn background-size niet meer?

De `background`-shorthand reset elke longhand die hij niet noemt. Stel `background-size` in na de shorthand, of neem hem op in de shorthand na de positie, met een schuine streep.