Kako podići pozadinsku sliku kako biste prilagodili web stranicu

Dajte vašoj web stranici vizualni interes sa pozadinskom grafikom

Slike su važan dio atraktivnih web dizajna. To uključuje upotrebu pozadinskih slika. To su slike i grafike koje se upotrebljavaju 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. Možete upotrijebiti prefikse preglednika za Firefox 3.6 (-moz-background-size) i Opera 10.0 (-o-background-size).

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 imaju visinu od 100%, 0 margine i 0 padding na elementima HTML i BODY. Stavite sljedeće u glavu svog HTML dokumenta:

2. Dodaj sliku koju želite biti pozadina kao prvi element web stranice i dati joj id "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:

   img # bg {
   pozicija: fiksna;
   vrh: 0;
   lijevo: 0;
   širina: 100%;
   visina: 100%;
   }

4. Dodajte sav svoj sadržaj na stranicu unutar DIV elementa s idom "sadržaja". Dodajte DIV ispod slike:

   Ovdje sve vaš sadržaj - uključujući zaglavlja, odlomke itd.

   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 odjeljak sadržaja je nakon slike u tijeku dokumenta - većina preglednika to neće prikazati.
   
5. Postavite svoj sadržaj tako da je relativan i ima z-indeks od 1. To će ga dovesti iznad pozadinske slike u preglednicima koji zadovoljavaju standarde. Dodajte ovo u svoj stilski obrazac:

   #content {
   pozicija: relativna;
   z-indeks: 1;
   }

1. 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:

2. Unutar istaknutog komentara dodajte još jedan stilski list s nekim stilovima da biste dobili IE 6 za lijepu reprodukciju:

3. 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 ​​za varanje ispružene pozadinske slike preko DIV ili drugog elementa na 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.

   img # bg {
   širina: 20m;
   visina: 30m;
   }

3. Stavite svoj sadržaj u div s id "sadržajem" kao što smo učinili gore:

   Cijeli vaš sadržaj ovdje

4. Dijelite sadržaj div kao ista širina i visina kao i pozadinska slika:

   div # content {
   širina: 20m;
   visina: 30m;
   }

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.

   #content {
   pozicija: relativna;
   vrh: -30em;
   z-indeks: 1;
   širina: 20m;
   visina: 30m;
   }

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.