CSS-bakgrunner: farger, gradienter og bilder i lag

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?».

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

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.

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

Bruk transparent i de ytterste stoppene, så lysene glir inn i det som ligger under. Se CSS-radialgradient og CSS-meshgradient 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.

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

Gradientoverlegg har flere oppskrifter, og tekst over bilder 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.

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

É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 for hele mønsteret.

Feil du bør unngå

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.

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

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 og WebP sammenlignet med PNG og JPG 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.