Dajte svoj vebsajt vizuelnom interesovanju sa pozadinskom grafikom
Slike su važan deo atraktivnih web dizajna. Ovo uključuje korištenje pozadinskih slika. Ovo su slike i grafike koje se koriste iza područja stranice za razliku od slika koje su predstavljene kao dio stranica sadržaja. Ove pozadinske slike mogu dodati vizuelni interes za stranicu i pomoći vam da postignete vizuelni dizajn koji možda tražite na stranici.
Ako počnete da radite sa pozadinskim slikama, nesumnjivo ćete ući u scenario u kome želite da se slika istegne kako bi odgovarala stranici.
Ovo je posebno važno za odgovarajuće web stranice koje se isporučuju širokom spektru uređaja i veličinama ekrana .
Ova želja da se proširi slika u pozadini je veoma česta želja za web dizajnerima, jer se svaka slika ne uklapa u prostor web stranice. Umjesto postavljanja fiksne veličine, rastezanje slike omogućava mu da se savijeva stranica, bez obzira na to koliko je širok ili sužen prozor pregledača .
Najbolji način za isticanje slike koja odgovara pozadini stranice je korištenje CSS3 osobine za veličinu pozadine. Evo primera koji koristi pozadinsku sliku za tijelo stranice i koji postavlja veličinu na 100%, tako da će se uvijek istegnuti kako bi se prilagodio ekranu.
body {
pozadina: url (bgimage.jpg) no-repeat;
background-size: 100%;
}
Prema caniuse.com, ova nekretnina radi u IE 9+, Firefox 4+, Opera 10,5+, Safari 5+, Chrome 10,5+ i svim glavnim pretraživačima mobilnih uređaja. Ovo vas pokriva za sve moderne pregledače dostupne danas, što znači da biste trebali koristiti ovu osobinu bez bojazni da neće raditi na nečijem ekranu.
Faking a Stretched Background in Older Browsers
Malo je verovatno da ćete morati da podržite bilo koji pregledač stariji od IE9, ali pretpostavimo da ste zabrinuti zbog toga što IE8 ne podržava ovu osobinu. U tom slučaju, možete podigpati istegnutu pozadinu. I možete koristiti prefikse pretraživača za Firefox 3.6 (-moz-background-size) i Opera 10.0 (-o-background-size).
Najlakši način za lažiranje istegnutog pozadinskog imidža jeste da ga proširite na celu stranicu. Onda ne završite sa dodatnim prostorom ili morate brinuti da se vaš tekst uklapa u rastegnuto područje. Evo kako to učiniti:
id = "bg" />
- Prvo, uverite se da svi pregledači imaju 100% visinu, 0 marže i 0 padding na elementima HTML BODY. Postavite sledeće u glavu vašeg HTML dokumenta:
- Dodajte sliku koju želite biti pozadina kao prvi element web stranice i dajte je id bg-a:
- Postavite pozadinsku sliku tako da je fiksiran na vrhu i lijevo i 100% širok i 100% u visini. Dodajte ovo na svoj stilski stil:
img # bg {
pozicija: fiksna;
vrh: 0;
lijevo: 0;
širina: 100%;
visina: 100%;
} - Dodajte sav svoj sadržaj na stranicu unutar DIV elementa sa idom "sadržaja". Dodajte DIV ispod slike:
Napomena: zanimljivo je gledati na vašu stranicu. Slika bi trebala biti ispružena, ali vaš sadržaj u potpunosti nedostaje. Zašto? Pošto je pozadinska slika visoka 100%, a podelu sadržaja je nakon slike u protoku dokumenta - većina pretraživača to neće prikazati.Sav vaš sadržaj ovde - uključujući zaglavlja, paragrafi itd.
- Postavite svoj sadržaj tako da je relativan i ima z-indeks od 1. Ovo će ga prenijeti iznad slike u pozadini u pretraživačima koji odgovaraju standardima. Dodajte ovo na svoj stilski stil:
#content {
položaj: relativan;
z-indeks: 1;
}
- Ali nisi gotova. Internet Explorer 6 nije usklađen sa standardima i ima još problema. Postoji mnogo načina sakrivanja CSS-a iz svakog pretraživača, ali IE6, ali najlakši (a najmanje najverovatnije izazvati druge probleme) je korištenje uslovnih komentara. Postavite sledeće posle vašeg stylesheeta u glavu vašeg dokumenta:
- Unutar istaknutog komentara, dodajte još jedan stilski stil sa nekim stilovima kako biste dobili dobar IE 6:
- Obavezno testirajte i IE 7 i IE 8. Možda ćete morati da prilagodite komentare i da ih podržite. Međutim, to je funkcionisalo kada sam je testirao.
OK - ovo je ustvari WAY overkill. Veoma malo lokacija mora više podržavati IE 7 ili 8, mnogo manje IE6!
Kao takav, ovaj pristup je zastareo i verovatno nepotreban za vas. Ostavljam ga više kao model radoznalosti o tome koliko su teže stvari pre nego što su svi naši pretraživači igrali tako lepo zajedno!
Faking an extended image background over a smaller space
Možete koristiti sličnu tehniku za lažnu istegnutu sliku pozadine preko DIV-a ili nekog drugog elementa na vašoj web stranici. Ovo je malo složeniji jer morate koristiti apsolutno pozicioniranje ili imati čudne razmake između drugih dijelova vaše stranice.
- Postavite sliku na stranicu koju želim koristiti kao pozadinu.
- U tablu za stil postavite širinu i visinu slike. Napomena, možete koristiti procente za širinu ili visinu, ali smatram da je lakše prilagoditi vrijednostima dužine za visinu.
img # bg {
širina: 20em;
visina: 30em;
} - Postavite svoj sadržaj u div sa ID-om "sadržaja" kao što smo već rekli:
Sav svoj sadržaj ovde
- Stavi sadržaj div da bude iste širine i visine kao slika pozadine:
div # content {
širina: 20em;
visina: 30em;
} - Zatim postavite sadržaj na istu visinu kao i slika. Dakle, ako je vaša slika 30em, imat ćeš stil top: -30em; Ne zaboravite staviti z-indeks od 1 na sadržaj.
#content {
položaj: relativan;
vrh: -30em;
z-indeks: 1;
širina: 20em;
visina: 30em;
} - Zatim dodajte z-indeks od -1 za korisnike IE 6, kao što ste već uradili:
Opet, sa pozadinskim veličinama koje uživaju u širokoj podršci pretraživača, sada to čini, ovaj pristup je vrlo vjerovatno nepotreban i predstavljen kao proizvod iz prošlosti. Ako ste želeli da koristite ovaj pristup, samo budite sigurni da to testirate u onom broju pretraživača koliko možete.
A ako se vaš sadržaj promeni veličine, moraćete da promenite veličinu vašeg kontejnera i slike u pozadini, u suprotnom, završićete sa čudnim rezultatima.