# CSS-baggrunde: farver, gradienter og billeder i lag

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

Én egenskab kan rumme et foto, en tone over det, et blødt lys i hjørnet og en reservefarve nedenunder. Når lagrækkefølgen sidder, tager de fleste baggrundseffekter én linje.

## The short version

- CSS-egenskaben background kan rumme flere lag adskilt af kommaer, og det første lag på listen males øverst.
- En baggrundsfarve kan kun sættes én gang, i det sidste lag, og vises under hvert billede og hver gradient.
- I shorthand-egenskaben background skal background-size følge efter background-position med en skråstreg, som i center / cover.
- At lægge et gradientlag over et billedlag i én deklaration er den enkleste måde at tone et foto, så tekst kan læses.
- Billeder sat i CSS opdages senere end img-elementer, så et vigtigt hero-billede kan have brug for et preload-hint.

En **CSS-baggrund** er en stak lag på ét element. Egenskaben `background` tager imod en kommasepareret liste af billeder og gradienter, malet med det første øverst, plus én enkelt farve helt nederst. Det er alt, du skal bruge til et tonet hero-foto, et blødt lys over en gradient eller en tekstur over en brandfarve, uden ekstra elementer eller omslag. Resten er at vide, hvordan shorthand-skrivemåden læser sine værdier.

## Background-shorthand, værdi for værdi

Shorthand-skrivemåden sætter op til otte longhand-egenskaber på én gang. Dem, du udelader, nulstilles til deres standardværdier, hvilket er den almindeligste kilde til fejl af typen »hvorfor forsvandt min baggrundsstørrelse«.

| Longhand | Hvad den styrer | Almindelige værdier |
| --- | --- | --- |
| `background-color` | Farven under alle lag | `#0f0b1e`, `oklch(20% 0.05 290)` |
| `background-image` | Billeder og gradienter, adskilt af kommaer | `url(photo.webp)`, `linear-gradient(…)` |
| `background-position` | Hvor hvert lag sidder | `center`, `top right`, `50% 30%` |
| `background-size` | Hvor stort hvert lag er | `cover`, `contain`, `200px auto` |
| `background-repeat` | Om det fliselægges | `no-repeat`, `repeat`, `repeat-x` |
| `background-attachment` | Ruller med elementet eller med visningsområdet | `scroll`, `fixed`, `local` |
| `background-origin` og `background-clip` | Hvilken boks det starter fra, og hvilken det klippes til | `padding-box`, `border-box`, `text` |

Fuld reference på [MDN's 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åstregen er påkrævet: størrelsen kan kun stå lige efter positionen. Farven kommer sidst og vises, mens billedet indlæses.

## Sådan stables baggrundslag

List lagene fra øverst til nederst, adskilt af kommaer. Hvert lag kan have sin egen position, størrelse og gentagelse, angivet i samme rækkefølge i hver longhand. Kun det sidste lag må indeholde en farve. Tænk på det som at læse ned gennem en bunke kalkerpapir.

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

Tre lag vist hver for sig. De to første toner ud til transparent, så bunden skinner igennem, hvor de ikke maler.

```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 lag stablet i én deklaration, det øverste først, med en ensfarvet reservefarve nederst.

Brug `transparent` i de ydre stop, så lys blender ind i det, der ligger under. Til selve formerne, se [CSS radial gradient](https://gradiently.design/da/guide/css-radial-gradient) og [CSS mesh gradient](https://gradiently.design/da/guide/css-mesh-gradient).

## En gradient over et baggrundsbillede

Den mest nyttige lagdelte baggrund toner et foto, så ord ovenpå kan læses. Sæt et gradientlag først og billedet som nummer to. En gradient, der er mørk, hvor teksten sidder, og klar andre steder, bevarer langt mere af fotoet end et fladt mørkt 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;
}
```

Mørk til venstre, hvor overskriften sidder, klar til højre, hvor fotoet skal ses.

Et bredt website-hero med en overskrift over en ensartet mørkere baggrund

Et fladt overlay gør tekst læselig ved at dæmpe alt lige meget.

Samme hero, hvor kun siden bag overskriften er roligere og mørkere

Et retningsbestemt lag gør kun mørkt, hvor ordene er, og lader resten af motivet være lyst.

[Gradient-overlay](https://gradiently.design/da/guide/gradient-overlay) har flere overlayopskrifter, og [tekst over billede](https://gradiently.design/da/guide/text-over-image) dækker, hvornår du skal flytte ordene i stedet for at gøre billedet mørkere.

## background-size, position og gentagelse

- `cover` fylder boksen og beskærer det, der løber over. Rigtigt til fotos og hero-sektioner i fuld bredde.
- `contain` placerer hele billedet indeni og efterlader mellemrum. Rigtigt til logoer og illustrationer, der ikke må beskæres.
- Par `cover` med en bevidst `background-position` som `50% 30%`, så beskæringen holder motivets ansigt eller produktet i billedet.
- Teksturfliser vil have `repeat` og en fast størrelse, for eksempel `200px 200px`, så kornet er ens ved alle skærmbredder.
- `background-attachment: fixed` giver et parallakseudtryk på desktop, men mange mobilbrowsere ignorerer det, så stol aldrig på det.

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

En lille gentaget kornflise over en varm gradient. Indstillinger pr. lag følger hvert billede, så gradienten ikke påvirkes af flisens størrelse.

Endnu en longhand fortjener sin plads: `background-clip: text` klipper baggrunden til bogstavernes form, og sådan laves gradientbogstaver i CSS. Gem den til store displayord, sæt en ensfarvet `color` som reserve, og se [CSS gradient-tekst](https://gradiently.design/da/guide/css-gradient-text) for det fulde mønster.

## Fejl, du skal undgå

### Undgå

- At sætte `background-size` og derefter shorthand-skrivemåden efter den, som nulstiller den
- En farve i andre lag end det sidste
- Ingen reservefarve, så tekst er ulæselig, mens billedet indlæses
- Et kæmpestort foto til en boks, der er 400 pixels bred
- Vigtigt indhold kun i et baggrundsbillede, usynligt for skærmlæsere

### Gør

- Skriv shorthand-skrivemåden først, derefter eventuelle longhand-tilsidesættelser
- Én farve, sidst på listen
- En reservefarve tæt på billedets gennemsnitstone
- Billeder i boksens størrelse, leveret som WebP eller AVIF
- Meningsfulde billeder som `img` med alt-tekst, pynt som baggrunde

## Responsive og hurtige baggrundsbilleder

`image-set()` lader browseren vælge mellem formater eller opløsninger, ligesom `srcset` på et `img`. Og fordi baggrundsbilleder først opdages, når CSS'en er parset, kan et hero-baggrundsbillede komme sent. Et preload-hint 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>
```

Browseren tager det første format, den understøtter. Preload sikrer, at hovedbilledet begynder at hente tidligt.

Ofte er den hurtigste baggrund slet intet billede. Lagdelte gradienter koster ingen download, og en lille kornflise tilføjer tekstur for nogle få kilobyte. [CSS gradient-ydeevne](https://gradiently.design/da/guide/css-gradient-performance) og [WebP vs. PNG og JPG](https://gradiently.design/da/guide/webp-images) dækker afvejningerne. Vil du hellere slippe for at finjustere lys og korn i hånden, giver en Gradiently Mark dig en færdig, kendetegnende baggrund i 1920×1080, hero-størrelsen til hjemmesider, med samme udtryk som dine opslag på sociale medier.

## FAQ

### Hvordan tilføjer jeg et baggrundsbillede i CSS?

Brug `background: url("image.webp") center / cover no-repeat;` på elementet, med en reservefarve til sidst, hvis billedet er langsomt at indlæse.

### Hvordan lægger jeg en gradient over et baggrundsbillede?

List gradienten først og billedet som nummer to i én `background`-deklaration, adskilt af et komma. Det første lag males øverst.

### Kan jeg bruge flere baggrunde i CSS?

Ja. Adskil lagene med kommaer. Hvert kan have sin egen position, størrelse og gentagelse, og kun det sidste lag må indeholde en farve.

### Hvad er forskellen på background-size cover og contain?

`cover` fylder hele elementet og beskærer det, der løber over. `contain` viser hele billedet og kan efterlade tomt rum omkring det.

### Hvorfor holder min background-size op med at virke?

Shorthand-egenskaben `background` nulstiller hver longhand, den ikke nævner. Sæt `background-size` efter shorthand-egenskaben, eller medtag den i shorthand-egenskaben efter positionen med en skråstreg.