Hero-bakgrunn til nettside: rike gradienter som laster raskt

En hero-bakgrunn er gradienten, bildet eller videoen bak den første seksjonen på en nettside. Den setter stemningen for hele nettstedet, og fordi den er det største som er synlig når siden åpnes, avgjør den ofte hvor rask siden føles. Det raskeste alternativet er en ren CSS-gradient, som lastes ned som noen få linjer tekst og holder seg skarp i enhver størrelse. Bilder og video kan se rikere ut, men krever omtanke rundt størrelser, formater og lasting, som dekkes under.

Denne guiden sammenligner de tre tilnærmingene og dekker deretter størrelser, responsive utsnitt, kode og kontrast i overskriften. For ytelsesdetaljene bak kan du lese ytelse i CSS-gradienter og videobakgrunner på nettsider.

CSS, bilde eller video: velge hero-bakgrunn

Heroen inneholder som regel sidens Largest Contentful Paint, øyeblikket da hovedinnholdet vises. web.dev regner en LCP på 2,5 sekunder eller mindre som god. Et tungt hero-bilde eller en tung video er den vanligste grunnen til at en side ikke klarer det, og derfor er det letteste alternativet som gir uttrykket, nesten alltid det riktige.

Bygge en hero med CSS-gradient

Å legge to eller tre gradienter i lag tar deg overraskende langt: en lineær grunngradient for hovedretningen, og så myke radiale glød for lys. Bland i OKLCH for å holde sterke farger livlige. Resultatet tegnes umiddelbart og trenger aldri en større fil til større skjermer.

.hero {
  min-height: min(92svh, 900px);
  display: grid;
  place-items: center;
  padding: clamp(4rem, 10vw, 8rem) 1.5rem;
  color: #fbf8ff;
  background-color: #1b1240; /* fallback while gradients paint */
  background-image:
    radial-gradient(ellipse 60% 50% at 78% 18%, oklch(0.72 0.19 350 / 0.75), transparent 70%),
    radial-gradient(ellipse 55% 45% at 15% 85%, oklch(0.62 0.17 250 / 0.7), transparent 70%),
    linear-gradient(160deg in oklch, #1b1240, #3a1d78 55%, #120c2c);
}

.hero h1 {
  max-width: 16ch;
  font-size: clamp(2.75rem, 6vw, 5.5rem);
  line-height: 1.04;
  text-align: center;
  text-wrap: balance;
}

For at en CSS-hero ikke skal se ut som en generisk forhåndsinnstilling, legger du til tekstur. Et fint lag med SVG-støy over gradienten skjuler bånding på store skjermer og gir fargen en materialfølelse. Støytekstur i CSS viser hvordan. For rikere farge med flere punkter legger meshgradienter i CSS flere glød i lag.

Størrelse og formater for hero-bakgrunnsbilder

Trenger heroen et bilde, lager du en master på 1920 × 1080 og eksporterer mindre versjoner til mindre skjermer. Server moderne formater: AVIF og WebP er som regel mye mindre enn JPEG med samme visuelle kvalitet, med JPEG som reserve. Last heroen med en gang, og fortell nettleseren at den er viktig.

<picture>
  <source type="image/avif"
          srcset="/hero-960.avif 960w, /hero-1440.avif 1440w, /hero-1920.avif 1920w"
          sizes="100vw">
  <source type="image/webp"
          srcset="/hero-960.webp 960w, /hero-1440.webp 1440w, /hero-1920.webp 1920w"
          sizes="100vw">
  <img src="/hero-1920.jpg"
       alt=""
       width="1920" height="1080"
       fetchpriority="high"
       decoding="async"
       class="hero-bg">
</picture>

Responsive utsnitt for hero-bakgrunner

En hero i 16:9 blir en høy, smal stripe på en mobil. Med object-fit: cover beskjærer nettleseren fra midten som standard, og det kan kutte bort den delen som betyr noe. Sett object-position for å beholde fokusområdet, eller server et eget, høyere utsnitt til små skjermer med et media-attributt på en source.

Skrivebord 16:9

1920 × 1080

Nettbrett, omtrent 4:3

1600 × 1200

Mobil, høy

1080 × 1920

Det er her CSS-gradienter skinner: glød plasseres i prosent, så de flytter seg med formen. Du kan også endre posisjoner ved et brytepunkt, for eksempel flytte hovedgløden fra øverst til høyre på skrivebord til øverst i midten på mobil, der overskriften stables.

Kontrast i overskriften på en hero-bakgrunn

Sjekk kontrasten på det lyseste punktet bak overskriften, ikke gjennomsnittet, og sikt mot minst 4,5:1 for mindre tekst og 3:1 for store overskrifter. Tekst på gradient dekker metoden, og tekst på bilde dekker heroer med fotografier.

Designer du heroen i Gradiently, tegnes en Mark direkte i 1920 × 1080 eller en hvilken som helst egendefinert størrelse, og den flytter det roligste området sitt bak ordene dine. Eksporter en PNG eller JPEG i opptil tre ganger designets størrelse for skarpe bilder på skjermer med høy tetthet, eller en loop på 5 til 30 sekunder til en videohero. Husk det samme uttrykket i Open Graph-bildet, så delte lenker matcher siden.