# CSS-taustat: värit, liukuvärit ja kuvat kerroksina

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

Yksi ominaisuus voi sisältää kuvan, sävytyksen, nurkan pehmeän valon ja alimpana varavärin. Kun kerrosjärjestys selviää, moni taustatehoste syntyy yhdellä rivillä.

## The short version

- CSS:n background hyväksyy pilkuilla erotetut kerrokset, joista ensimmäinen piirretään päällimmäiseksi.
- Taustaväri asetetaan vain kerran viimeiseen kerrokseen, ja se näkyy kaikkien kuvien ja liukuvärien alla.
- background-lyhenteessä background-size seuraa sijaintia vinoviivan jälkeen, kuten center / cover.
- Liukuvärikerros kuvakerroksen edellä samassa määrittelyssä on helpoin tapa sävyttää kuva tekstille luettavaksi.
- CSS-taustakuvat löytyvät myöhemmin kuin img-elementit, joten tärkeä pääkuva voi tarvita esilatausvihjeen.

**CSS-taustat** muodostuvat yhden elementin kerroksista. `background` hyväksyy pilkuilla erotetut kuvat ja liukuvärit, joista ensimmäinen piirretään päälle, sekä yhden värin alimmaiseksi. Näin teet sävytetyn pääkuvan, pehmeän valon liukuvärille tai pintakuvion brändivärille ilman lisäelementtejä. Jäljelle jää lyhenteen arvojen ymmärtäminen.

## background-lyhenne arvo kerrallaan

Lyhenne asettaa enintään kahdeksan erillistä ominaisuutta. Pois jätetyt palautuvat oletuksiin, mikä aiheuttaa usein ”Miksi taustan koko katosi?” -virheen.

| Ominaisuus | Mitä se ohjaa | Tavalliset arvot |
| --- | --- | --- |
| `background-color` | Väri kaikkien kerrosten alla | `#0f0b1e`, `oklch(20% 0.05 290)` |
| `background-image` | Kuvat ja liukuvärit pilkuilla eroteltuina | `url(photo.webp)`, `linear-gradient(…)` |
| `background-position` | Kunkin kerroksen paikka | `center`, `top right`, `50% 30%` |
| `background-size` | Kunkin kerroksen koko | `cover`, `contain`, `200px auto` |
| `background-repeat` | Toistuuko tausta | `no-repeat`, `repeat`, `repeat-x` |
| `background-attachment` | Vieritys elementin tai näkymän mukana | `scroll`, `fixed`, `local` |
| `background-origin` ja `background-clip` | Mistä laatikosta tausta alkaa ja mihin se leikataan | `padding-box`, `border-box`, `text` |

Täydellinen viite [MDN:n background-sivulla](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;
}
```

Vinoviiva on pakollinen: koko voi tulla vain heti sijainnin jälkeen. Viimeinen väri näkyy kuvan latautuessa.

## Taustakerrosten pinoaminen

Listaa kerrokset ylhäältä alas pilkuilla erotettuna. Jokaisella voi olla oma sijainti, koko ja toisto samassa järjestyksessä erillisissä ominaisuuksissa. Vain viimeinen kerros voi sisältää värin. Ajattele katsovasi kuultopaperipinon läpi.

- Kerros 1: pinkki valo: `radial-gradient(circle at 80% 20%, #f472b6 0%, transparent 45%)`
- Kerros 2: sininen valo: `radial-gradient(circle at 15% 85%, #38bdf8 0%, transparent 50%)`
- Kerros 3: indigopohja: `linear-gradient(160deg, #1e1b4b 0%, #0f0b1e 100%)`

Kolme kerrosta erikseen. Kaksi ensimmäistä häipyvät läpinäkyviksi, joten pohja näkyy niiden ulkopuolella.

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

Samat kolme kerrosta yhdessä määrittelyssä, ylin ensin ja tasainen varaväri alimmaisena.

Käytä ulommissa väripisteissä `transparent`-arvoa, jotta valot sulautuvat alla olevaan. Muodoista kertovat [CSS:n säteittäinen liukuväri](https://gradiently.design/fi/guide/css-radial-gradient) ja [CSS-verkkoliukuväri](https://gradiently.design/fi/guide/css-mesh-gradient).

## Liukuväri taustakuvan päällä

Hyödyllisin kerrostausta sävyttää kuvan niin, että sanat erottuvat. Liukuväri ensin, kuva toiseksi. Tekstin kohdalta tumma ja muualla läpinäkyvä liukuväri säilyttää kuvasta enemmän kuin tasainen tumma peite.

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

Tumma vasemmalla otsikon takana, läpinäkyvä oikealla, missä kuvan pitää näkyä.

Leveä verkkosivun pääkuva, jossa otsikko on tasaisesti tummennetulla taustalla

Tasainen peite tekee tekstistä luettavaa himmentämällä kaiken yhtä paljon.

Sama pääkuva, jossa vain otsikon takainen puoli on rauhallisempi ja tummempi

Suunnattu kerros tummentaa vain tekstin kohdan ja jättää muun näkymän kirkkaaksi.

[Liukuväripeite](https://gradiently.design/fi/guide/gradient-overlay) tarjoaa lisää reseptejä. [Teksti kuvan päällä](https://gradiently.design/fi/guide/text-over-image) kertoo, milloin kannattaa siirtää sanoja tummentamisen sijaan.

## background-size, sijainti ja toisto

- `cover` täyttää laatikon ja rajaa yli menevän. Sopii kuviin ja reunasta reunaan ulottuviin pääkuviin.
- `contain` mahduttaa koko kuvan ja jättää mahdollisesti tyhjää. Sopii logoihin ja kuvituksiin, joita ei saa rajata.
- Yhdistä `cover` harkittuun `background-position`-arvoon kuten `50% 30%`, jotta kasvot tai tuote pysyvät näkyvissä.
- Pintakuviolle sopii `repeat` ja kiinteä koko kuten `200px 200px`, jotta rae pysyy samana kaikilla näyttöleveyksillä.
- `background-attachment: fixed` tekee työpöydällä parallaksivaikutelman, mutta moni mobiiliselain sivuuttaa sen. Älä rakenna sen varaan.

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

Pieni toistuva raekuva lämpimän liukuvärin päällä. Kerroksen asetukset seuraavat kuvaa, joten ruutukoko ei vaikuta liukuväriin.

Myös `background-clip: text` on hyödyllinen: se leikkaa taustan kirjainten muotoon ja tekee CSS-liukuväritekstin. Käytä suurissa otsikoissa ja aseta tasainen `color` varalle. [CSS-liukuväriteksti](https://gradiently.design/fi/guide/css-gradient-text) näyttää koko mallin.

## Vältettävät virheet

### Vältä

- background-size-arvoa ennen sen nollaavaa lyhennettä
- Väriä muualla kuin viimeisessä kerroksessa
- Varavärin puuttumista, jolloin teksti ei näy kuvan latautuessa
- Valtavaa kuvaa 400 pikselin laatikkoon
- Tärkeää sisältöä vain ruudunlukijalta piilossa olevassa taustakuvassa

### Tee näin

- Lyhenne ensin, erilliset ohitukset sen jälkeen
- Yksi väri listan loppuun
- Varaväri lähelle kuvan keskimääräistä sävyä
- Laatikon kokoiset WebP- tai AVIF-kuvat
- Merkityksellinen kuva img-elementtinä alt-tekstillä, koriste taustaksi

## Mukautuvat ja nopeat taustakuvat

`image-set()` antaa selaimen valita muodon tai tarkkuuden kuten `img`-elementin `srcset`. Taustakuva löytyy vasta CSS:n jäsennyksessä ja voi siksi saapua myöhään. `head`-osan esilatausvihje korjaa tämän.

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

Selain valitsee ensimmäisen tukemansa muodon. Esilataus aloittaa pääkuvan latauksen ajoissa.

Nopein tausta on usein kokonaan ilman kuvaa. Kerrostetut liukuvärit eivät vaadi latausta, ja pieni raekuva lisää pintaa muutamalla kilotavulla. [CSS-liukuvärien suorituskyky](https://gradiently.design/fi/guide/css-gradient-performance) ja [WebP verrattuna PNG:hen ja JPG:hen](https://gradiently.design/fi/guide/webp-images) käsittelevät valintoja. Jos et halua säätää valoa ja rakeisuutta käsin, Gradientlyn Mark antaa valmiin, omaleimaisen 1920×1080-pääkuvataustan samassa ilmeessä kuin somejulkaisut.

## FAQ

### Miten lisään taustakuvan CSS:llä?

Aseta elementille `background: url("image.webp") center / cover no-repeat;` ja loppuun varaväri hitaasti latautuvaa kuvaa varten.

### Miten laitan liukuvärin taustakuvan päälle?

Listaa liukuväri ensin ja kuva toiseksi samassa `background`-määrittelyssä pilkulla erotettuna. Ensimmäinen kerros piirretään päälle.

### Voinko käyttää useita CSS-taustoja?

Kyllä. Erota kerrokset pilkuilla. Jokaisella voi olla oma sijainti, koko ja toisto, mutta väri vain viimeisessä kerroksessa.

### Mitä eroa background-size-arvoilla cover ja contain on?

`cover` täyttää elementin ja rajaa ylimenevän, `contain` näyttää koko kuvan ja voi jättää tyhjää sen ympärille.

### Miksi background-size lakkaa toimimasta?

`background`-lyhenne nollaa mainitsemattomat ominaisuudet. Aseta `background-size` lyhenteen jälkeen tai sisällytä koko siihen sijainnin jälkeen vinoviivalla.