# CSS-bakgrunner: farger, gradienter og bilder i lag

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

Én egenskap kan romme et bilde, en fargetone over det, et mykt lys i hjørnet og en reservefarge under. Når lagrekkefølgen sitter, tar de fleste bakgrunnseffekter én linje.

## The short version

- CSS-egenskapen background kan ha flere kommaseparerte lag, og det første laget i listen tegnes øverst.
- En bakgrunnsfarge kan bare settes én gang, i siste lag, og vises under alle bilder og gradienter.
- I kortformen background må background-size følge etter background-position med en skråstrek, som i center / cover.
- Et gradientlag over et bildelag i én deklarasjon er den enkleste måten å tone et bilde for lesbar tekst på.
- Bilder satt i CSS oppdages senere enn img-elementer, så et viktig toppbilde kan trenge et forhåndslastingshint.

En **CSS-bakgrunn** er en stabel av lag på ett element. Egenskapen `background` tar en kommaseparert liste med bilder og gradienter, med det første øverst, pluss én farge helt nederst. Det er alt du trenger til et tonet toppbilde, et mykt lys over en gradient eller tekstur over en merkevarefarge, uten ekstra elementer eller omsluttende beholdere. Resten handler om å vite hvordan kortformen leser verdiene.

## Kortformen background, verdi for verdi

Kortformen setter opptil åtte enkeltegenskaper samtidig. De du utelater, tilbakestilles til standardverdiene. Det er den vanligste årsaken til feil av typen «hvor ble bakgrunnsstørrelsen av?».

| Enkeltegenskap | Hva den styrer | Vanlige verdier |
| --- | --- | --- |
| `background-color` | Fargen under alle lag | `#0f0b1e`, `oklch(20% 0.05 290)` |
| `background-image` | Bilder og gradienter, kommaseparert | `url(photo.webp)`, `linear-gradient(…)` |
| `background-position` | Hvor hvert lag ligger | `center`, `top right`, `50% 30%` |
| `background-size` | Hvor stort hvert lag er | `cover`, `contain`, `200px auto` |
| `background-repeat` | Om det gjentas som fliser | `no-repeat`, `repeat`, `repeat-x` |
| `background-attachment` | Om det ruller med elementet eller visningsområdet | `scroll`, `fixed`, `local` |
| `background-origin` og `background-clip` | Hvilken boks det starter i og beskjæres til | `padding-box`, `border-box`, `text` |

Full referanse på [MDNs background-side](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;
}
```

Skråstreken er påkrevd: størrelse kan bare stå rett etter posisjon. Fargen står sist og vises mens bildet lastes.

## Slik stables bakgrunnslag

List lagene fra øverst til nederst, atskilt med komma. Hvert lag kan ha egen posisjon, størrelse og gjentakelse, gitt i samme rekkefølge i hver enkeltegenskap. Bare siste lag kan ha en farge. Tenk på det som å lese ned gjennom en bunke kalkerpapir.

- Lag 1: rosa lys: `radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%)`
- Lag 2: blått lys: `radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%)`
- Lag 3: indigobunn: `linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)`

Tre lag vist hver for seg. De første to toner ut til gjennomsiktig, så bunnen synes der de ikke tegner.

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

De samme tre lagene stablet i én deklarasjon, øverste først, med en ensfarget reserve nederst.

Bruk `transparent` i de ytterste stoppene, så lysene glir inn i det som ligger under. Se [CSS-radialgradient](https://gradiently.design/nb/guide/css-radial-gradient) og [CSS-meshgradient](https://gradiently.design/nb/guide/css-mesh-gradient) for selve formene.

## En gradient over et bakgrunnsbilde

Den nyttigste lagdelte bakgrunnen toner et bilde slik at ordene over blir lesbare. Sett gradientlaget først og bildet deretter. En gradient som er mørk der teksten står og klar ellers, bevarer langt mer av bildet enn et jevnt mørkt overlegg.

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

Mørkt til venstre der overskriften står, klart til høyre der bildet bør synes.

Et bredt toppfelt på en nettside med overskrift over en jevnt mørknet bakgrunn

Et jevnt overlegg gjør teksten lesbar ved å dempe alt like mye.

Samme toppfelt der bare siden bak overskriften er roligere og mørkere

Et retningsbestemt lag mørkner bare der ordene står og lar resten av motivet være lyst.

[Gradientoverlegg](https://gradiently.design/nb/guide/gradient-overlay) har flere oppskrifter, og [tekst over bilder](https://gradiently.design/nb/guide/text-over-image) viser når du bør flytte ordene fremfor å mørkne bildet.

## background-size, posisjon og gjentakelse

- `cover` fyller boksen og beskjærer det som går utenfor. Riktig for bilder og toppfelt som går helt til kanten.
- `contain` får hele bildet innenfor og etterlater mellomrom. Riktig for logoer og illustrasjoner som ikke må beskjæres.
- Kombiner `cover` med en bevisst `background-position`, som `50% 30%`, så utsnittet beholder motivets ansikt eller produktet.
- Teksturfliser trenger `repeat` og en fast størrelse, for eksempel `200px 200px`, så kornet er likt ved alle skjermbredder.
- `background-attachment: fixed` gir et parallakseuttrykk på datamaskiner, men mange mobilnettlesere ignorerer det. Ikke gjør designet avhengig av det.

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

En liten, gjentatt kornflis over en varm gradient. Innstillingene per lag følger hvert bilde, så gradienten ikke påvirkes av flisstørrelsen.

Én enkeltegenskap til fortjener plass: `background-clip: text` klipper bakgrunnen til bokstavenes form, og er måten gradienttekst lages i CSS på. Bruk den til store displayord, sett en ensfarget `color` som reserve, og se [CSS-gradienttekst](https://gradiently.design/nb/guide/css-gradient-text) for hele mønsteret.

## Feil du bør unngå

### Unngå

- Å sette `background-size` og deretter kortformen, som tilbakestiller den
- En farge i noe annet lag enn det siste
- Ingen reservefarge, så teksten er uleselig mens bildet lastes
- Et enormt bilde til en boks som er 400 piksler bred
- Viktig innhold bare i et bakgrunnsbilde, usynlig for skjermlesere

### Gjør dette

- Skriv kortformen først, deretter overstyringer med enkeltegenskaper
- Én farge, på slutten av listen
- En reservefarge nær bildets gjennomsnittstone
- Bilder tilpasset boksen, levert som WebP eller AVIF
- Meningsbærende bilder som `img` med alternativtekst, dekor som bakgrunner

## Responsive og raske bakgrunnsbilder

`image-set()` lar nettleseren velge mellom formater eller oppløsninger, omtrent som `srcset` på en `img`. Fordi bakgrunnsbilder først oppdages når CSS-en er tolket, kan et toppbilde komme sent. Et forhåndslastingshint i `head` løser det.

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

Nettleseren tar det første formatet den støtter. Forhåndslastingen sørger for at hovedbildet begynner å lastes ned tidlig.

Ofte er den raskeste bakgrunnen helt uten bilde. Lagdelte gradienter trenger ingen nedlasting, og en liten kornflis tilfører tekstur for noen få kilobyte. [Ytelse for CSS-gradienter](https://gradiently.design/nb/guide/css-gradient-performance) og [WebP sammenlignet med PNG og JPG](https://gradiently.design/nb/guide/webp-images) dekker avveiningene. Hvis du heller vil slippe å finjustere lys og korn, gir en Mark fra Gradiently en ferdig, særegen bakgrunn i toppfeltstørrelsen 1920×1080, med samme uttrykk som de sosiale innleggene dine.

## FAQ

### Hvordan legger jeg til et bakgrunnsbilde i CSS?

Bruk `background: url("image.webp") center / cover no-repeat;` på elementet, med en reservefarge til slutt i tilfelle bildet laster langsomt.

### Hvordan legger jeg en gradient over et bakgrunnsbilde?

List gradienten først og bildet deretter i én `background`-deklarasjon, atskilt med komma. Første lag tegnes øverst.

### Kan jeg bruke flere bakgrunner i CSS?

Ja. Skill lagene med komma. Hvert lag kan ha egen posisjon, størrelse og gjentakelse, og bare siste lag kan ha en farge.

### Hva er forskjellen på background-size cover og contain?

`cover` fyller hele elementet og beskjærer det som går utenfor. `contain` viser hele bildet og kan etterlate tomrom rundt.

### Hvorfor slutter background-size å fungere?

Kortformen `background` tilbakestiller alle enkeltegenskaper den ikke nevner. Sett `background-size` etter kortformen, eller ta den med i kortformen etter posisjonen med en skråstrek.