Använd CSS3 för att sträcka ut en bakgrundsbild för att passa en webbsida

Den här artikeln förklarar två sätt att sträcka en bakgrundsbild så att den passar en webbsida med CSS3.

Det moderna sättet

Bilder är en viktig del av attraktivt webbdesign. De ger en sida visuellt intresse och hjälper dig att uppnå den design du letar efter. När du arbetar med bakgrundsbilder kanske du vill att en bild ska sträckas så att den passar sidan trots stort utbud av enheter och skärmstorlekar.

Det bästa sättet att sträcka en bild så att den passar bakgrunden till ett element är att använda CSS3 egendom, för bakgrundsstorlekoch ställ det lika med omslag.

div {
bakgrundsbild: url ('background.jpg');
bakgrundsstorlek: omslag;
bakgrundsupprepning: ingen upprepning;
}

Ta en titt på detta exempel på det i aktion. Här är HTML i bilden nedan.

Ta en titt på CSS. Det är inte mycket annorlunda än koden ovan. Det finns några tillägg för att göra det tydligare.

Nu är detta resultatet i helskärm.

Genom att sätta bakgrundsstorlek till omslag, garanterar du att webbläsare automatiskt skalar bakgrundsbilden, hur stor den än är, för att täcka hela området av HTML-elementet som det tillämpas på. Titta på ett smalare fönster.

Enligt caniuse.com, den här metoden stöds av över 90 procent av webbläsarna, vilket gör det till ett självklart val i de flesta situationer. Det skapar vissa problem med Microsoft-webbläsare, så det kan vara nödvändigt med en reserv.

Fallback Way

Här är ett exempel som använder en bakgrundsbild för en sidas kropp och som ställer in storleken på 100% så att den alltid sträcker sig för att passa skärmen. Denna metod är inte perfekt, och det kan orsaka lite avtäckt utrymme, men genom att använda bakgrundsposition egendom, bör du kunna eliminera problemet och ändå rymma äldre webbläsare.

kropp {
bakgrund: url ('bgimage.jpg');
bakgrundsupprepning: ingen upprepning;
bakgrundsstorlek: 100%;
bakgrundsposition: centrum;
} 

Med hjälp av exemplet ovanifrån med bakgrundsstorlek satt till 100% istället kan du se att CSS ser mestadels ut.

Resultatet i en helskärmsläsare eller en med liknande dimensioner som bilden är nästan identisk. Men med en smalare skärm börjar bristerna visa sig.

Det är uppenbart att det inte är idealiskt, men det kommer att fungera som en reserv.

Enligt caniuse.com, den här egenskapen fungerar i IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ och på alla större mobilwebbläsare. Detta täcker dig för alla moderna webbläsare som finns idag, vilket innebär att du bör använda den här egenskapen utan rädsla för att den inte fungerar på någons skärm.

Mellan dessa två metoder bör du inte ha några problem med att stödja nästan alla webbläsare. Som bakgrundsstorlek: omslag får ännu mer acceptans bland webbläsare, även denna reserv kommer att bli onödig. Det är uppenbart att CSS3 och mer responsiv designpraxis har förenklat och strömlinjeformats med bilder som adaptiva bakgrunder inom HTML-element.