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

Bilder är en viktig del av attraktiva webbdesigner. Detta inkluderar användningen av bakgrundsbilder. Det här är de bilder och grafik som används Bakom områden på en sida i motsats till bilder som presenteras som en del av innehållssidorna. Dessa bakgrundsbilder kan lägga visuellt intresse för en sida och hjälpa dig att uppnå den visuella designen som du kan leta efter på en sida.

Om du börjar arbeta med bakgrundsbilder, kommer du utan tvekan att gå in i scenariot där du vill att en bild ska sträckas för att passa på sidan. Detta gäller särskilt för mottagliga webbplatser som levereras till ett brett utbud av enheter och skärmstorlekar.

Denna önskan att sträcka en bakgrundsbild är en mycket vanlig önskan för webbdesigners eftersom inte alla bilder passar inuti en webbplats. I stället för att ställa in en bestämd storlek, kan bilden sträcka sig för att passa på sidan, oavsett hur stor eller smal webbläsarfönstret är.

Det bästa sättet att sträcka en bild för att passa bakgrunden till en sida är att använda egenskapen CSS3, för bakgrundsstorlek. Här är ett exempel som använder en bakgrundsbild för en sidans kropp och som sätter storleken till 100% så att den alltid sträcker sig så att den passar skärmen.

kropp { bakgrund: url (bgimage.jpg) no-repeat; bakgrundsstorlek: 100%; }

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

Faking en sträckt bakgrund i äldre webbläsare

Det är mycket osannolikt att du skulle behöva stödja alla webbläsare som är äldre än IE9, men låt oss anta att du är oroad över att IE8 inte stöder den här egenskapen. I det fallet kan du förfalska en utsträckt bakgrund. Och du kan använda webbläsarens prefix för Firefox 3.6 (-moz-bakgrund-storlek) och Opera 10.0 (-o-bakgrund-storlek).

Det enklaste sättet att förfalska en utsträckt bakgrundsbild är att sträcka den över hela sidan. Då slutar du inte med extra utrymme eller behöver oroa dig för att din text passar i det sträckta området. Så här gör du det:

id = "bg" />

1. Först, se till att alla webbläsare har en 100% höjd, 0 marginaler och 0 vaddering på ochhtml KROPP element. Placera följande i huvudet på ditt HTML-dokument:
2. Lägg till den bild som du vill vara bakgrunden som det första elementet på webbsidan, och ge den den id av "bg":
3. Placera bakgrundsbilden så att den är fixerad överst och vänster och är 100% bred och 100% i höjd. Lägg till det här på ditt stilark:
   1. img # bg {
   3. position: fast;
   5. topp: 0;
   7. vänster: 0;
   9. bredd: 100%;
   11. höjd: 100%;
   13. }
4. Lägg till allt ditt innehåll på sidan inuti a DIV element med en id av "innehåll". Lägg till DIV nedanför bilden:Allt ditt innehåll här - inklusive rubriker, stycken etc.
   1. Obs! Det är intressant att titta på din sida nu. Bilden ska visas utsträckt, men ditt innehåll saknas helt. Varför? Eftersom bakgrundsbilden är 100% i höjd och innehållsavdelningen är efter bilden i flödet av dokumentet - de flesta webbläsare kommer inte visa det.
5. Placera ditt innehåll så att det är relativt och har en z-index av 1. Detta kommer att hämta det ovanför bakgrundsbilden i standardkompatibla webbläsare. Lägg till det här på ditt stilark:
   1. #innehåll {
   3. position: relativ;
   5. z-index: 1;
   7. }
6. Men du är inte klar. Internet Explorer 6 är inte standardkompatibel och har fortfarande några problem. Det finns många sätt att dölja CSS från alla webbläsare men IE6, men det enklaste (och minst sannolikt att orsaka andra problem) är att använda villkorade kommentarer. Lägg följande efter ditt stilark i huvudet på ditt dokument:
7. Inne i den markerade kommentaren lägger du till ett annat stilark med vissa stilar för att få IE 6 att spela bra:
8. Var noga med att testa i IE 7 och IE 8 också. Du kan behöva justera kommentarerna för att stödja dem också. Det fungerade dock när jag testade det.

OK - det här är visserligen WAY overkill. Mycket få platser behöver stödja IE 7 eller 8 längre, mycket mindre IE6! Som sådan är denna inställning föråldrad och sannolikt onödig för dig. Jag lämnar det här mer som en modell av nyfikenhet om hur mycket svårare saker var innan alla våra webbläsare spelade så bra tillsammans!

Faking en sträckt bakgrundsbild över ett mindre utrymme

Du kan använda en liknande teknik för att förfalska en utsträckt bakgrundsbild över en DIV eller ett annat element på din webbsida. Det här är lite svårare eftersom du måste antingen använda absolut positionering eller ha främmande distansproblem för andra delar av din sida.

1. Placera bilden på sidan som jag vill använda som bakgrund.
2. Ställ in bredd och höjd för bilden i stilarket. Observera att du kan använda procenttal för bredd eller höjd, men det är lättare att justera med längdvärden för höjden.
   1. img # bg {
   3. bredd: 20em;
   5. höjd: 30em;
   7. }
3. Placera ditt innehåll i en div med id "innehåll" som vi gjorde ovan:Allt ditt innehåll här
4. Stil innehålls-diven med samma bredd och höjd som bakgrundsbilden:
   1. div # innehåll {
   3. bredd: 20em;
   5. höjd: 30em;
   7. }
5. Placera sedan innehållet upp till samma höjd som bilden.Så om din bild är 30em skulle du ha en toppstil: -30em; Glöm inte att lägga ett z-index på 1 på innehållet.
   1. #innehåll {
   3. position: relativ;
   5. topp: -30em;
   7. z-index: 1;
   9. bredd: 20em;
   11. höjd: 30em;
   13. }
6. Lägg sedan till ett z-index på -1 för IE 6-användare, som du gjorde ovan:

Återigen, med bakgrundsstorlek som åtnjuter det breda webbläsarstödet gör det nu, är detta tillvägagångssätt också mycket troligt onödigt och presenteras som en produkt av en svunnen tid. Om du vill använda detta tillvägagångssätt, var noga med att testa detta i så många webbläsare som möjligt. Och om ditt innehåll ändras, måste du ändra storleken på din behållare och bakgrundsbild, annars kommer du att sluta med konstiga resultat.