CSS-bakgrunder: färger, gradienter och bilder i lager

En CSS-bakgrund är en stapel lager på ett element. Egenskapen background tar en kommaseparerad lista med bilder och gradienter, målade med den första överst, plus en enda färg längst ned. Det är allt du behöver för ett tonat herofoto, ett mjukt ljus över en gradient eller en textur över en varumärkesfärg, utan extra element eller omslag. Resten är att veta hur kortformen läser sina värden.

Kortformen background, värde för värde

Kortformen sätter upp till åtta långformsegenskaper på en gång. Alla du utelämnar återställs till sina standardvärden, vilket är den vanligaste källan till felen ”varför försvann min bakgrundsstorlek”.

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

Hur bakgrundslager staplas

Lista lagren uppifrån och ned, åtskilda med kommatecken. Varje lager kan ha sin egen position, storlek och upprepning, angivna i samma ordning i varje långform. Bara det sista lagret får innehålla en färg. Tänk på det som att läsa ned genom en hög kalkerpapper.

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

Använd transparent i de yttre stoppen så att ljusen blandas in i det som ligger under. För själva formerna, se CSS radial gradient och CSS mesh gradient.

En gradient över en bakgrundsbild

Den mest användbara lagerbakgrunden tonar ett foto så att orden ovanpå går att läsa. Lägg ett gradientlager först och bilden som andra. En gradient som är mörk där texten sitter och klar på andra ställen behåller mycket mer av fotot än ett platt mörkt överlägg.

.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överlägg har fler överläggsrecept, och text över bild tar upp när du ska flytta orden i stället för att mörkna bilden.

background-size, position och upprepning

• cover fyller rutan och beskär det som flödar över. Rätt för foton och herobilder som går ut i kanten.
• contain rymmer hela bilden inuti och lämnar luckor. Rätt för logotyper och illustrationer som inte får beskäras.
• Para cover med en medveten background-position som 50% 30% så att beskärningen behåller motivets ansikte eller produkten i bild.
• Texturkakel vill ha repeat och en fast storlek, till exempel 200px 200px, så att kornet förblir detsamma i varje skärmbredd.
• background-attachment: fixed ger ett parallaxutseende på datorer, men många mobilwebbläsare ignorerar det, så förlita dig aldrig på det.

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

En långform till förtjänar sin plats: background-clip: text skär bakgrunden till bokstävernas form, vilket är så gradientbokstäver görs i CSS. Spara den till stora displayord, sätt en enfärgad color som reserv och se CSS-gradienttext för hela mönstret.

Misstag att undvika

Responsiva och snabba bakgrundsbilder

image-set() låter webbläsaren välja mellan format eller upplösningar, ungefär som srcset på en img. Och eftersom bakgrundsbilder först upptäcks när CSS:en tolkats kan en herobakgrund komma sent; en preload-ledtråd 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>

Ofta är den snabbaste bakgrunden ingen bild alls. Lagrade gradienter kostar ingen nedladdning, och en liten kornkakel ger textur för några kilobyte. CSS-gradienters prestanda och WebP mot PNG och JPG tar upp avvägningarna. Vill du hellre slippa finjustera ljus och korn ger en Gradiently-Mark dig en färdig, särpräglad bakgrund i webbplatsens herostorlek 1920×1080, med samma look som dina sociala inlägg.