Hur man lägger till roliga CSS-bakgrunder till dina webbplatser

Sep 13, 2025

Hur

Tiden var en webbsidor bakgrund var en liten kakel bild - och ofta hemskt, angripa varje besökares ögonbollar. Idag utgör bakgrunden grunden för mycket online grafisk design.

Denna revolution i bakgrunden på webben har drivits av framsteg i CSS. Webbstandarder ger nu mycket mer kontroll, så du kan försiktigt definiera en bakgrunds position, arbeta med gradienter och lägga till flera bakgrunder till ett enda element.

Att täcka allt i detta område skulle kräva en bok, och så har vi plockat några viktiga utgångspunkter för att få dig att gå och det udda valet länken för dig att utforska vidare. Njut av!

Lägg till CSS-bakgrunder till webbsidor

CSS-bakgrunder kräver bakgrund Shorthand egendom, eller användningen av mer specifika egenskaper, såsom (men inte begränsat till): bakgrundsfärg ; bakgrundsbild ; bakgrundsställning ; bakgrundsstorlek ; bakgrundsrepetition ; och Bakgrundsfäste . Dessa kan definieras för webbsidans bakgrund (genom kropp väljare) eller sidelement som rubriker, div, och så vidare.

På den mest grundläggande nivån kan du använda bakgrund För att vända en sida röd:

 Body {
 Bakgrund: röd;
 }

Går lite mer avancerad, kan du lägga till en bild som är horisontellt centrerad, 20px från toppen av behållaren, inte upprepad och fixerad på plats som webbsidan rullar:

 Body {
 Bakgrund: URL (image.png) Center 20px No-Repeat Fixed;
 }

An image as a background (note: avoid this low level of contrast in your own designs) — En bild som bakgrund (Obs! Undvik denna låga kontrastnivå i dina egna mönster)

Om du ville skriva det utan att använda bakgrund Shorthand, det skulle se ut så här:

 Body {
 Bakgrund-bild: URL (image.png);
 Bakgrundsposition: Center 20px;
 BAKGRUND-REPEAT: NO-REPEAT;
 Bakgrundsfäste: Fast;
 }

Om du vill lägga till flera bakgrunder till ett element kan du komma åt separata värdeuppsättningar i CSS-deklarationen. Observera att vilket objekt som anges först är högst upp i stapeln, vilket betyder att det kommer att visas "ovan" andra bakgrunder.

 Body {
 Bakgrund: URL (image.png) Center 20px No-Repeat Fixed, URL (Image-2.png) Center Center No-Repeat Fixed;
 }

I det här fallet visas en bild som i föregående exempel, och den nedan "direkt i mitten av innehållsområdet.

Ändra storlek på bakgrundsbilder

Hittills har vi undvikit bakgrundsstorlek . Men det är ganska viktigt, för det gör det möjligt för dig att styra storleken på en bakgrundsbild. Specifikt kan du definiera de horisontella och vertikala dimensionerna av en bild i pixlar eller procentuella termer, till exempel:

 Bakgrundsstorlek: 200px 50px;

Det finns också två sökordsvärden, som istället kan användas: innehålla och omslag . Dessa är i stort sett lika, för att ge ett sätt att skala en bild inom ett elements innehållsområde. Skillnaden är det innehålla är utformad för att göra en bild så stor som möjligt, samtidigt som det visar allt inom innehållsområdet (vilket betyder att du brukar få luckor runt det), medan omslag Helt täcker innehållsområdet, men kan leda till att en del av bilden inte är synlig. Den senare används vanligen på webbplatser som använder fotografier som bakgrund.

CSS ‘contain’ (top) versus ‘cover’ (bottom) values — CSS innehåller "(topp) mot" Cover "(botten) värden

Observera att du kan lägga till bakgrundsstorlek till en bakgrund Shorthand Definition - Placera den efter bakgrundsställning värden, med en framåt snedstreck som skiljer de två:

 Bakgrund: URL (image.png) Center 20px / Innehåller No-Repeat Fixed

Använd High-Res Retina Bakgrundsbilder

När du lägger till high-res retina bakgrunder, bakgrundsstorlek är också användbar för att tvinga sådana bilder att visas på rätt storlek.

För ett exempel, föreställ dig a div med en id av logotyp . Detta har lämpligen en logotyp som används som bakgrund i CSS. Det är 150 pixlar kvadrat, och så den grundläggande CSS du skulle använda är:

 #logo {
 Bredd: 150px;
 Höjd: 150px;
 Bakgrund: URL (logo.png) no-repeat;
 }

High-res komplicerar saker. Vi vill inte tvinga äldre hårdvara för att ladda större bilder, och så måste en mediafråga användas för att bara ladda den högupplösta logotypen på stödd hårdvara.

 @Media (-WebKit-min-enhet-pixel-förhållande: 2),
 (min-upplösning: 192dpi) {
  #logotyp {
   Bakgrund-bild: URL ([email protected]);
  }
 }

Problemet är nu den @ 2x High-Res-bilden är 300 pixlar torg (eftersom den har dubbelt så stor som originalets upplösning), men används som bakgrund för en 150-pixel-kvadratbehållare. Så vid denna tidpunkt ser du bara en fjärdedel av det.

A high-res image before a resize fix — En högupplöst bild före en storlek

Detta är fixat genom att tilldela en specifik bakgrundsstorlek värde för #logotyp :

 #logo {
 Bredd: 150px;
 Höjd: 150px;
 Bakgrund: URL (logo.png) no-repeat;
 Bakgrundsstorlek: 150px 150px;
 }

Den högupplogotypen, nu snyggt inuti sin behållare

En mer modern metod för att arbeta med flera bakgrundsupplösningar och uppnå samma resultat är CSS4 bilduppsättning :

 #logo {
 Bakgrund-Bild: Bilduppsättning (
  URL (logo.png) 1x,
  URL ([email protected]) 2x
  );
 }

Fördelarna med bilduppsättning är enklare CSS, och användaragenten bestämmer bilden som ska användas. Nackdelen är webbläsarstöd - vid skrivetiden - förblir ofullständig. Besök den här testsidan För ett snabbt sätt att kontrollera hur webbläsare du stöder biljettpris. (Det här är kanske varför många designers Använd skript för att automatisera servering av högåriga bilder .)

Arbeta med alfakanaler och gradienter

Vårt slutspets i detta flammande snabbt (i hemsida Tutorial termer) Artikel avser alfakanaler och gradienter. När Internet var ångdrivna, hade du ofta designers använda "checkerboard" gifs för att simulera alfakanaler (alla andra pixlar var transparent). Nu tilldelar du bara färger i RGBA:

 Main {
 Bakgrund: RGBA (255,255,255,0,7);
 }

I det ovanstående exemplet skulle bakgrunden vara 70 procent vit, vilket möjliggör vad som helst under det att visa igenom. Du måste vara försiktig med att behålla klarhet när du använder semi-transparent bakgrunder som är över komplexa bilder, men de kan vara bra för att lägga till visuellt intresse för webbsidor.

Alpha channels, gradients, and some questionable colour choices — Alfa-kanaler, gradienter och några tvivelaktiga färgval

På samma sätt användes webbdesigners för att mata ut och kakel gifs om de ville ha en gradient som bakgrund, men det är inte längre nödvändigt, såvida du inte vill festa som det är 1999. Dessa dagar vill du ha CSS3 linjärt-gradient och radialgradient egenskaper, för vilka du definierar riktningar och färgstopp.

Här är en CSS-regel med en grundläggande gradient:

 H1 {
 Bakgrund: Linjär-gradient (till höger, RGBA (255,255,255,1), RGBA (255,255,255,0));
}

Detta skulle tillämpas på nivå-ett-rubriker, vilket ger dem en linjär gradient som går från vänster till höger, börjar med solid vit och slutar i transparent vit.

Med hjälp av vinklar och flera färgstopp kan du gå mycket, mycket längre med gradienter. För att experimentera, försök använda en Photoshop-liknande CSS-gradientgenerator och undersökning av kodutgången (Att vara uppmärksam det länkade exemplet lägger till syntax för äldre webbläsare - bara ta tag i linjärt-gradient linje för din egen användning).

As the CSS Patterns Gallery shows, you can do really fancy things with CSS gradients — Eftersom CSS-mönstren galleri visar kan du göra riktigt fina saker med CSS-gradienter

Om du vill checka ut vilka kryddade webbpersonal kan göra med gradienter och bakgrundsstorlek , Kolla in Lea Verous CSS3 Patterns Gallery . Där hittar du massor av levande exempel som använder CSS-gradienter för att skapa alla typer av allvarligt imponerande bakgrundsmönster.

Och ja, det är en ledtråd av var vi kom in om eyeball övergrepp i några av dem.Men som med allt när det gäller webbbakgrund är nyckeln till att säkerställa vad du lägger till är relevant i samband med din design och - viktigast av allt - att bakgrunden inte distraherar från innehåll, eller gör det oläsligt.

Relaterade länkar:

En guide till att skriva bättre CSS
Skapa en responsiv layout med CSS-rutnät
CSS-tricks att revolutionera dina layouter

Hur man lägger till roliga CSS-bakgrunder till dina webbplatser

Lägg till CSS-bakgrunder till webbsidor

Ändra storlek på bakgrundsbilder

Använd High-Res Retina Bakgrundsbilder

Arbeta med alfakanaler och gradienter

Hur - Mest populära artiklar

Mixed-Media Art Tutorial: Hur vattenfärg över digitalt konstverk

Skapa speciella utskriftsfinisher i InDesign

Scatter Trees med V-Ray

Skapa ett enkelt färgschema

Hur man skulpterar ett tecken i VR

Färgstyrda och släta slag med sketchable

Simulera en Ghost Rider-omvandling

Fyra principer av UX-strategi

Kategorier