Koristite CSS3 da biste protežu pozadinsku sliku da biste prilagodili web stranicu

Slike su važan dio atraktivnih web dizajna. To uključuje upotrebu pozadinskih slika. Ovo su slike i grafike koje se koriste iza područja stranice, za razliku od slika koje su prikazane kao dio stranica sa sadržajem. Te pozadinske slike mogu dodati vizualni interes za stranicu i pomoći vam da postignete vizualni dizajn koji možda tražite na stranici.

Ako počnete raditi s pozadinskim slikama, nesumnjivo ćete se uključiti u scenarij u kojem želite da se slika proteže kako bi bila prilagođena stranici. To je osobito istinito za responzivne web stranice koje se isporučuju na širok raspon uređaja i veličina zaslona.

Ova želja da se proširi pozadinska slika vrlo je česta želja za web dizajnera jer se svaka slika ne uklapa u prostor web stranice. Umjesto postavljanja fiksne veličine, istezanje slike omogućuje joj da se prilagodi stranici, bez obzira na to koliko je široka ili uska prozor preglednika.

Najbolji način da se proteže slika kako bi se prilagodila pozadini stranice je korištenje svojstva CSS3, za pozadinsku veličinu. Evo primjera koji koristi pozadinsku sliku za tijelo stranice i koji postavlja veličinu do 100%, tako da će se uvijek protezati kako bi se prilagodio zaslonu.

tijelo { pozadina: url (bgimage.jpg) ne-ponoviti; veličina pozadine: 100%; }

Prema caniuse.com, ovo svojstvo funkcionira u preglednicima IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chromea 10.5+ i na svim većim mobilnim preglednicima. To vas pokriva za sve moderne preglednike dostupne danas, što znači da biste trebali koristiti ovu nekretninu bez straha da neće raditi na nečijem zaslonu.

Probijanje pozadine u starijim preglednicima

Vrlo je malo vjerojatno da biste trebali podržavati preglednike starije od IE9, ali pretpostavimo da ste zabrinuti da IE8 ne podržava ovu imovinu. U tom slučaju, možete varati ispruženu pozadinu. I možete koristiti prefikse preglednika za Firefox 3.6 (-moz pozadinske veličine) i Opera 10.0 (-O-pozadina veličine).

Najlakši način za lažiranje ispružene pozadinske slike je da se proteže preko cijele stranice. Zatim nećete završiti s dodatnim prostorom ili se brinuti da se vaš tekst uklapa u rastegnutom području. Evo kako to učiniti:

id = "bg" />

1. Prvo provjerite jesu li svi preglednici 100% visine, 0 margina i 0 padding na iHTML TIJELO elementi. Stavite sljedeće u glavu svog HTML dokumenta:
2. Dodajte sliku koju želite biti pozadina kao prvi element web stranice i dati joj iskaznica od "bg":
3. Postavite pozadinsku sliku tako da je pričvršćena na vrhu i lijevo, 100% široko i 100% visine. Dodajte ovo u svoj stilski obrazac:
   1. img # bg {
   3. pozicija: fiksna;
   5. vrh: 0;
   7. lijevo: 0;
   9. širina: 100%;
   11. visina: 100%;
   13. }
4. Dodajte sav svoj sadržaj na stranicu unutar a DIV element s iskaznica od "sadržaja". Dodaj DIV ispod slike:Ovdje sve vaš sadržaj - uključujući zaglavlja, odlomke itd.
   1. Napomena: zanimljivo je pogledati vašu stranicu sada. Slika bi trebala biti ispružena, ali vaš sadržaj potpuno nedostaje. Zašto? Budući da je pozadinska slika 100% visoka, a podjela sadržaja nakon slika u tijeku dokumenta - većina preglednika neće ga prikazati.
5. Postavite sadržaj tako da je relativan i ima a z-index od 1. To će ga dovesti iznad pozadinske slike u standardima koji zadovoljavaju preglednike. Dodajte ovo u svoj stilski obrazac:
   1. #content {
   3. pozicija: relativna;
   5. z-indeks: 1;
   7. }
6. Ali niste gotovi. Internet Explorer 6 nije usklađen s normama i još uvijek ima nekih problema. Postoji mnogo načina za skrivanje CSS-a iz svakog preglednika, ali IE6, no najlakši (i najmanje vjerojatno da će uzrokovati druge probleme) jest korištenje uvjetnih komentara. U nastavku dokumenta stavite sljedeće:
7. Unutar istaknutog komentara dodajte još jedan stilski list s nekim stilovima da biste dobili IE 6 za lijepu reprodukciju:
8. Svakako provjerite i IE 7 i IE 8. Možda ćete morati prilagoditi i komentare kako biste ih podržali. Međutim, radio je kad sam ga testirala.

OK - ovo je svakako WAY overkill. Vrlo malo web-lokacija mora podržavati IE 7 ili 8, a manje IE6! Kao takav, ovaj je pristup zastario i vjerojatno vam je nepotreban. Ovdje ostavljam više kao modelu znatiželje koliko je bilo teže stvari prije nego što su svi naši preglednici tako lijepo svi zajedno!

Probijanje rastegnute pozadinske slike preko manjeg prostora

Možete upotrijebiti sličnu tehniku ​​kako biste lažirali ispruženu pozadinsku sliku preko DIV ili drugi element na vašoj web stranici. Ovo je pomalo trickier kao što morate koristiti apsolutno pozicioniranje ili imate čudne probleme za razmake za druge dijelove stranice.

1. Postavite sliku na stranicu koju želim koristiti kao pozadinu.
2. U listi stila postavite širinu i visinu slike. Napominjemo da možete koristiti postotke za širinu ili visinu, ali lakše je prilagoditi vrijednostima duljine za visinu.
   1. img # bg {
   3. širina: 20m;
   5. visina: 30m;
   7. }
3. Stavite svoj sadržaj u div s iskaznica "sadržaj" kao što smo učinili gore:Cijeli vaš sadržaj ovdje
4. Dijelite sadržaj div kao ista širina i visina kao pozadinska slika:
   1. div # content {
   3. širina: 20m;
   5. visina: 30m;
   7. }
5. Zatim postavite sadržaj do iste visine kao i slika.Dakle, ako je vaša slika 30em, imat ćete stil vrha: -30em; Nemojte zaboraviti staviti z-indeks od 1 na sadržaj.
   1. #content {
   3. pozicija: relativna;
   5. vrh: -30em;
   7. z-indeks: 1;
   9. širina: 20m;
   11. visina: 30m;
   13. }
6. Zatim dodajte z-indeks od -1 za korisnike IE 6, kao što ste učinili gore:

Opet, s pozadinskom veličinom uživajući u podršci širokog preglednika, to je sada vrlo vjerojatno nepotrebno i predstavljeno kao proizvod prošlih razdoblja. Ako ste htjeli upotrijebiti ovaj pristup, svakako isprobajte ovo što je moguće više preglednika. A ako sadržaj promijeni veličinu, morat ćete promijeniti veličinu spremnika i pozadinsku sliku, inače ćete završiti čudnim rezultatima.