# CSS-bakgrunder: färger, gradienter och bilder i lager

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

En egenskap kan rymma ett foto, en tonad hinna över det, ett mjukt ljus i hörnet och en reservfärg under. När lagerordningen väl sitter tar de flesta bakgrundseffekter en enda rad.

## The short version

- CSS-egenskapen background kan rymma flera kommaseparerade lager, och det första lagret i listan målas överst.
- En bakgrundsfärg kan bara anges en gång, i det sista lagret, och syns under varje bild och gradient.
- I kortformen background måste background-size följa efter background-position med ett snedstreck, som i center / cover.
- Att lägga ett gradientlager ovanför ett bildlager i en och samma deklaration är det enklaste sättet att tona ett foto för läsbar text.
- Bilder som anges i CSS upptäcks senare än img-element, så en viktig herobild kan behöva en preload-ledtråd.

En **CSS-bakgrund** är en stapel lager på ett element. Egenskapen `background` tar en kommaseparerad lista med bilder och gradienter, målade med den första överst, plus en enda färg längst ned. Det är allt du behöver för ett tonat herofoto, ett mjukt ljus över en gradient eller en textur över en varumärkesfärg, utan extra element eller omslag. Resten är att veta hur kortformen läser sina värden.

## Kortformen background, värde för värde

Kortformen sätter upp till åtta långformsegenskaper på en gång. Alla du utelämnar återställs till sina standardvärden, vilket är den vanligaste källan till felen ”varför försvann min bakgrundsstorlek”.

| Långform | Vad den styr | Vanliga värden |
| --- | --- | --- |
| `background-color` | Färgen under varje lager | `#0f0b1e`, `oklch(20% 0.05 290)` |
| `background-image` | Bilder och gradienter, kommaseparerade | `url(photo.webp)`, `linear-gradient(…)` |
| `background-position` | Var varje lager sitter | `center`, `top right`, `50% 30%` |
| `background-size` | Hur stort varje lager är | `cover`, `contain`, `200px auto` |
| `background-repeat` | Om det upprepas som kakel | `no-repeat`, `repeat`, `repeat-x` |
| `background-attachment` | Rullar med elementet eller visningsytan | `scroll`, `fixed`, `local` |
| `background-origin` och `background-clip` | Vilken ruta den utgår från och skärs till | `padding-box`, `border-box`, `text` |

Fullständig referens på [MDN:s background-sida](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;
}
```

Snedstrecket krävs: storleken kan bara stå direkt efter positionen. Färgen kommer sist och syns medan bilden laddas.

## Hur bakgrundslager staplas

Lista lagren uppifrån och ned, åtskilda med kommatecken. Varje lager kan ha sin egen position, storlek och upprepning, angivna i samma ordning i varje långform. Bara det sista lagret får innehålla en färg. Tänk på det som att läsa ned genom en hög kalkerpapper.

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

Tre lager var för sig. De två första tonar ut till transparent, så att botten syns igenom där de inte målar.

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

Samma tre lager staplade i en deklaration, översta först, med en enfärgad reservfärg längst ned.

Använd `transparent` i de yttre stoppen så att ljusen blandas in i det som ligger under. För själva formerna, se [CSS radial gradient](https://gradiently.design/sv/guide/css-radial-gradient) och [CSS mesh gradient](https://gradiently.design/sv/guide/css-mesh-gradient).

## En gradient över en bakgrundsbild

Den mest användbara lagerbakgrunden tonar ett foto så att orden ovanpå går att läsa. Lägg ett gradientlager först och bilden som andra. En gradient som är mörk där texten sitter och klar på andra ställen behåller mycket mer av fotot än ett platt mörkt överlägg.

```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 till vänster där rubriken sitter, klart till höger där fotot ska synas.

En bred webbplatshero med en rubrik över en jämnt mörknad bakgrund

Ett platt överlägg gör texten läsbar genom att dämpa allt lika mycket.

Samma hero där bara sidan bakom rubriken är lugnare och mörkare

Ett riktat lager mörknar bara där orden finns och lämnar resten av scenen ljus.

[Gradientöverlägg](https://gradiently.design/sv/guide/gradient-overlay) har fler överläggsrecept, och [text över bild](https://gradiently.design/sv/guide/text-over-image) tar upp när du ska flytta orden i stället för att mörkna bilden.

## background-size, position och upprepning

- `cover` fyller rutan och beskär det som flödar över. Rätt för foton och herobilder som går ut i kanten.
- `contain` rymmer hela bilden inuti och lämnar luckor. Rätt för logotyper och illustrationer som inte får beskäras.
- Para `cover` med en medveten `background-position` som `50% 30%` så att beskärningen behåller motivets ansikte eller produkten i bild.
- Texturkakel vill ha `repeat` och en fast storlek, till exempel `200px 200px`, så att kornet förblir detsamma i varje skärmbredd.
- `background-attachment: fixed` ger ett parallaxutseende på datorer, men många mobilwebbläsare ignorerar det, så förlita dig aldrig på det.

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

En liten upprepande kornkakel över en varm gradient. Inställningar per lager följer varje bild, så gradienten påverkas inte av kakelstorleken.

En långform till förtjänar sin plats: `background-clip: text` skär bakgrunden till bokstävernas form, vilket är så gradientbokstäver görs i CSS. Spara den till stora displayord, sätt en enfärgad `color` som reserv och se [CSS-gradienttext](https://gradiently.design/sv/guide/css-gradient-text) för hela mönstret.

## Misstag att undvika

### Undvik

- Att sätta `background-size` och sedan kortformen efter den, vilket återställer den
- En färg i något annat lager än det sista
- Ingen reservfärg, så texten är oläslig medan bilden laddas
- Ett enormt foto för en ruta som är 400 pixlar bred
- Viktigt innehåll bara i en bakgrundsbild, osynligt för skärmläsare

### Gör

- Skriv kortformen först, sedan eventuella långformsöverstyrningar
- En färg, sist i listan
- En reservfärg nära bildens medelton
- Bilder anpassade till rutan, levererade som WebP eller AVIF
- Meningsfulla bilder som `img` med alt-text; dekoration som bakgrunder

## Responsiva och snabba bakgrundsbilder

`image-set()` låter webbläsaren välja mellan format eller upplösningar, ungefär som `srcset` på en `img`. Och eftersom bakgrundsbilder först upptäcks när CSS:en tolkats kan en herobakgrund komma sent; en preload-ledtråd 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>
```

Webbläsaren tar det första format den stöder. Preloaden ser till att huvudbilden börjar laddas ned tidigt.

Ofta är den snabbaste bakgrunden ingen bild alls. Lagrade gradienter kostar ingen nedladdning, och en liten kornkakel ger textur för några kilobyte. [CSS-gradienters prestanda](https://gradiently.design/sv/guide/css-gradient-performance) och [WebP mot PNG och JPG](https://gradiently.design/sv/guide/webp-images) tar upp avvägningarna. Vill du hellre slippa finjustera ljus och korn ger en Gradiently-Mark dig en färdig, särpräglad bakgrund i webbplatsens herostorlek 1920×1080, med samma look som dina sociala inlägg.

## FAQ

### Hur lägger jag till en bakgrundsbild i CSS?

Använd `background: url("image.webp") center / cover no-repeat;` på elementet, med en reservfärg sist ifall bilden är långsam att ladda.

### Hur lägger jag en gradient över en bakgrundsbild?

Lista gradienten först och bilden som andra i en och samma `background`-deklaration, åtskilda med ett kommatecken. Det första lagret målas överst.

### Kan jag använda flera bakgrunder i CSS?

Ja. Avgränsa lager med kommatecken; varje kan ha egen position, storlek och upprepning, och bara det sista lagret får innehålla en färg.

### Vad är skillnaden mellan background-size cover och contain?

`cover` fyller hela elementet och beskär det som flödar över; `contain` visar hela bilden och kan lämna tomt utrymme runt den.

### Varför slutar min background-size fungera?

Kortformen `background` återställer varje långform den inte nämner. Sätt `background-size` efter kortformen, eller ta med den i kortformen efter positionen med ett snedstreck.