CSS-baggrunde: farver, gradienter og billeder i lag

En CSS-baggrund er en stak lag på ét element. Egenskaben background tager imod en kommasepareret liste af billeder og gradienter, malet med det første øverst, plus én enkelt farve helt nederst. Det er alt, du skal bruge til et tonet hero-foto, et blødt lys over en gradient eller en tekstur over en brandfarve, uden ekstra elementer eller omslag. Resten er at vide, hvordan shorthand-skrivemåden læser sine værdier.

Background-shorthand, værdi for værdi

Shorthand-skrivemåden sætter op til otte longhand-egenskaber på én gang. Dem, du udelader, nulstilles til deres standardværdier, hvilket er den almindeligste kilde til fejl af typen »hvorfor forsvandt min baggrundsstørrelse«.

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

Sådan stables baggrundslag

List lagene fra øverst til nederst, adskilt af kommaer. Hvert lag kan have sin egen position, størrelse og gentagelse, angivet i samme rækkefølge i hver longhand. Kun det sidste lag må indeholde en farve. Tænk på det som at læse ned gennem 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;
}

Brug transparent i de ydre stop, så lys blender ind i det, der ligger under. Til selve formerne, se CSS radial gradient og CSS mesh gradient.

En gradient over et baggrundsbillede

Den mest nyttige lagdelte baggrund toner et foto, så ord ovenpå kan læses. Sæt et gradientlag først og billedet som nummer to. En gradient, der er mørk, hvor teksten sidder, og klar andre steder, bevarer langt mere af fotoet end et fladt mørkt overlay.

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

Gradient-overlay har flere overlayopskrifter, og tekst over billede dækker, hvornår du skal flytte ordene i stedet for at gøre billedet mørkere.

background-size, position og gentagelse

• cover fylder boksen og beskærer det, der løber over. Rigtigt til fotos og hero-sektioner i fuld bredde.
• contain placerer hele billedet indeni og efterlader mellemrum. Rigtigt til logoer og illustrationer, der ikke må beskæres.
• Par cover med en bevidst background-position som 50% 30%, så beskæringen holder motivets ansigt eller produktet i billedet.
• Teksturfliser vil have repeat og en fast størrelse, for eksempel 200px 200px, så kornet er ens ved alle skærmbredder.
• background-attachment: fixed giver et parallakseudtryk på desktop, men mange mobilbrowsere ignorerer det, så stol aldrig på det.

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

Endnu en longhand fortjener sin plads: background-clip: text klipper baggrunden til bogstavernes form, og sådan laves gradientbogstaver i CSS. Gem den til store displayord, sæt en ensfarvet color som reserve, og se CSS gradient-tekst for det fulde mønster.

Fejl, du skal undgå

Responsive og hurtige baggrundsbilleder

image-set() lader browseren vælge mellem formater eller opløsninger, ligesom srcset på et img. Og fordi baggrundsbilleder først opdages, når CSS'en er parset, kan et hero-baggrundsbillede komme sent. Et preload-hint 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 hurtigste baggrund slet intet billede. Lagdelte gradienter koster ingen download, og en lille kornflise tilføjer tekstur for nogle få kilobyte. CSS gradient-ydeevne og WebP vs. PNG og JPG dækker afvejningerne. Vil du hellere slippe for at finjustere lys og korn i hånden, giver en Gradiently Mark dig en færdig, kendetegnende baggrund i 1920×1080, hero-størrelsen til hjemmesider, med samme udtryk som dine opslag på sociale medier.