# Hero-bakgrunn til nettside: rike gradienter som laster raskt [Canonical HTML page](https://gradiently.design/nb/guide/website-hero-background) Heroen er der et nettsted gir sitt førsteinntrykk, og der det oftest blir tregt. En gradienthero kan være både det rikeste og det letteste på siden, hvis du bygger den riktig. ## The short version - En hero-bakgrunn er bildet, gradienten eller videoen bak den første seksjonen på en nettside, og det er ofte elementet som avgjør hvor rask siden føles. - Rene CSS-gradienter legger nesten ingenting til nedlastingen og skalerer perfekt til enhver skjerm, noe som gjør dem til den raskeste hero-bakgrunnen. - Bildeheroer bør bruke en master på 1920 × 1080, moderne formater som AVIF eller WebP og responsive størrelser, og de bør aldri lastes med lazy loading. - Videoheroer trenger et plakatbilde, lydløs autoplay inne på siden og et stillestående alternativ for dem som foretrekker redusert bevegelse. - Uansett bakgrunn trenger overskriften et rolig område med sterk kontrast i alle skjermstørrelser. 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](https://gradiently.design/nb/guide/css-gradient-performance) og [videobakgrunner på nettsider](https://gradiently.design/nb/guide/video-background-website). ## CSS, bilde eller video: velge hero-bakgrunn | Tilnærming | Nedlastingsvekt | Uttrykk | Best til | | --- | --- | --- | --- | | CSS-gradient | Nesten ingen: en del av stilarket | Glatt farge, glød, myke mesher | Raske nettsteder, produktsider, merkevarer bygget på farge | | Bilde (AVIF, WebP, JPEG) | Moderat: avhenger av størrelse og format | Hva som helst: tekstur, fotografi, korn | Rike materialer, bilder, kompleks kunst | | Video | Tung: som regel den største filen på siden | Bevegelse, dybde, atmosfære | Lanseringer og merkevarer der bevegelsen er poenget | | WebGL eller canvas | Skript pluss kostnaden ved å tegne | Levende, interaktiv farge | Flaggskipsider med ytelsesbudsjett til det | Start øverst, og gå bare nedover når designet virkelig trenger det neste alternativ legger til. Heroen inneholder som regel sidens Largest Contentful Paint, øyeblikket da hovedinnholdet vises. web.dev regner en [LCP](https://web.dev/articles/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. ```css .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; } ``` En lagdelt CSS-hero: to glød over en grunngradient, med en ensfarget reservefarge. Den veier noen hundre byte og fyller enhver skjerm. Hero-glød, tilnærmet i ett lag: `radial-gradient(ellipse 60% 50% at 78% 18%, #e0629a 0%, #6b2f9a 45%, #1b1240 100%)` Den rosa gløden og den dype fiolette grunnen fra koden over, tegnet som én radial gradient så du kan se stemningen. 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](https://gradiently.design/nb/guide/css-noise-texture) viser hvordan. For rikere farge med flere punkter legger [meshgradienter i CSS](https://gradiently.design/nb/guide/css-mesh-gradient) 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. ```html ``` Et responsivt hero-bilde: moderne formater først, eksplisitte mål for å hindre at oppsettet hopper, `fetchpriority="high"` og ingen `loading="lazy"`. Tom alt-tekst markerer det som dekorativt. > **Bruk aldri lazy loading på heroen** `loading="lazy"` utsetter bilder til de er nær visningsområdet. Heroen er allerede i visningsområdet, så lazy loading gjør bare at hovedinnholdet på siden vises senere. ## 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 Den samme heroen i tre former. Gradienter tilpasser seg selv, mens bilder trenger et valgt fokuspunkt eller et eget utsnitt for mobil. 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 ### Unngå - En overskrift som krysser den lyseste gløden - Kontrast som bare er sjekket på skrivebord - Et mørkt overlegg over hele bildet for å redde teksten - Tekst med lav kontrast på en gradient i mellomtoner ### Gjør - Glød plassert unna overskriften - Kontrast sjekket ved hvert brytepunkt - En myk scrim bare der ordene står - Tydelig mørkt eller tydelig lyst bak teksten 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](https://gradiently.design/nb/guide/text-on-gradient) dekker metoden, og [tekst på bilde](https://gradiently.design/nb/guide/text-over-image) 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](https://gradiently.design/nb/guide/open-graph-image-size), så delte lenker matcher siden. ## FAQ ### Hvilken størrelse bør et hero-bakgrunnsbilde ha? Lag en master på 1920 × 1080, og server mindre versjoner til mindre skjermer med `srcset`. Bruk AVIF eller WebP med JPEG som reserve. ### Er en CSS-gradient raskere enn et hero-bilde? Ja. En CSS-gradient er noen få linjer i stilarket uten noe ekstra å laste ned, og den holder seg skarp i alle størrelser. Bilder og video legger til filer som må lastes før heroen ser ferdig ut. ### Bør jeg bruke lazy loading på hero-bildet? Nei. Heroen er synlig når siden åpnes, så lazy loading bare forsinker den. Last den med en gang, legg til `fetchpriority="high"` og sett bredde og høyde. ### Hvordan holder jeg en hero-overskrift lesbar? Plasser lyse områder unna ordene, bruk en myk scrim bare bak overskriften ved behov, og sjekk kontrasten i alle skjermstørrelser.