Ovaj članak je prevod članka pod naslovom Background images sa sajta www.ilovejackdaniels.com. Autor je Dave Child.
Hajde da se suočimo, mnogi web sajtovi su prilično bledi (da, uključujući i ovaj). Mnogi sajtovi koriste premalo slika da bi oživeli svoje stranice ili završavaju kao dosadni sajtovi umesto da upotrebljavaju slike da bi dodali interesantne vizuelne efekte. Ipak, dodavanje slika ne bi moralo da bude problematično i jedan od najbržih, najefektivnijih načina da se to uradi je korišćenjem pozadina.
Odabir slika
Pre par godina Geocities and Angelfire su bili zatrpani sajtovima koji su koristili neverovatno svetle, drečave pozadine na svojim stranicama. Od jednom, ove vrste pozadine (tiled backgrounds) su izašle iz mode i ljudi su počeli da im se potsmevaju. Ipak, ne postoji razlog da ih ne koristite ako su odabrane sa ukusom i ako se pobrinete da ih suptilno postavite tako da je sadržaj vaše stranice i dalje čitljiv. Za one od vas koji imaju dilemu da li ovakve pozadine mogu biti dolične, pogledajte besplatne pozadine dostupne na sajtu Squidfingers.com, od kojih sve izgledaju odlično i mogu da značajno poboljšaju vašu web stranicu.
Naravno, ne postoji razlog zašto bi uopšte koristile tiled pozadine na nekom sajtu. Ponekad jedna, jednostavna slika može delovati najbolje, kako što će to pokazati brza poseta sajtu CSSZenGarden.com . Ako koristite pozadinsku sliku, pobrinite se o tome da se ona ne sudara sa vašim dizajnom kao i da vaš sajt jednako dobro funkcioniše bez nje, jer neće svako biti u stanju da je vidi.
Takođe nema razloga da pozadina koju dodajete bude pozadina čitave strane. Pozadine jednako dobro funkcioniraju kao granice elemenata ili pozadine specifičnih delova stranice, umesto celog dokumenta.
Dodavanje pozadina
Definisanje pozadina u CSS-u je jako jednostavno i ispod je dat primer najbržeg načina da se to uradi.
body {
background-image: url("background.gif");
}
Ovaj će kod smestiti sliku "background.gif" u gornjem levom delu stranice. Ova slika će proširiti tako da pokrije celu stranu. Kada budete skrolovali stranicu, pozadina će se pomerati dok to radite.
Neki ljudi možda nisu u stanju da vide slike - možda su ih isključili, na primer - tako da je važno da postavite boju pozadine takođe. Ovo se radi korišćenjem "background-color" osobine, kao što je to pokazano ispod. Imajte na umu da će ako imate providne oblasti u vašoj pozadinskoj slici, boja koju odaberete biće vidljiva na tim mestima. Takođe kada postavljate pozadinu elementu, važno je ne predpostaviti da svako ima istu default boju pozadine kao i vi, pošto to ne mora da bude slučaj.
body {
background-color: #ffffff;
background-image: url("background.gif");
}
Zaustavite tu pozadinu
Prvu stvar koju će mnogi dizajneri poželeti da urade je da zaustave pozadinu od pomeranja i automatskog ponavljanja. Oni žele jednu sliku kao pozadinu i oni žele da slika ostane na mestu dok se skroluje. Ova podešavanja se kontrolišu putem "background-repeat" i "background-attachment".
"background-repeat" govori browser-u u kom pravcu slika treba da se ponavlja, ako uopšte to treba da radi. Dozvoljene vrednosti su "no-repeat", "repeat-x", "repeat-y" and "repeat".
"repeat" je default ponašanje za većinu browser-a, tako da se obično ne isplati postavljati ga.
"repeat-x" govori browser-u da sliku ponovi horizontalno, a "repeat-y" vertikalno.
"no-repeat" govori browser-u da iskoristi sliku samo jednom - da je ne ponavlja u bilo kom pravcu. Da bismo rekli browser-u da ne ponavlja sliku, mogli bi da iskoristimo sledeći kod:
body {
background-color: #ffffff;
background-image: url("background.gif");
background-repeat: no-repeat;
}
Više kontrole
"background-attachment" kaže browser-u da li slika treba da se pomera kada korisnik skroluje stranicu zajedno sa tom stranicom. Default vrednost je pomeranje, tako da je ova osobina korisna jedino kada dizajner želi da slika ostane na mestu za vreme skrolovanja."background-attachment" može da ima dve vrednosti, "scroll" (default) ili "fixed". Na istim primerom, slika će ostati na mestu kada korisnik skroluje uz pomoć sledećeg koda:
body {
background-color: #ffffff;
background-image:
url("background.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}
Pozicioniranje
Osobina "background-position" u CSS se odnosi na bilo koji element sa pozadinskom slikom. Može se iskoristiti da bi se pozadinska slika pomerala po stranici i sa malo kreativnosti upotrebom metode server-side scripting-a moguće je da slika bude na različitom mestu za različite korisnike vašeg sajta. Ipak, za sada da se zadržimo na osnovama.
Pozicioniranje pozadine može da se izvrši na jedan od tri načina: korišćenjem ključnih reči, korišćenjem procenata ili korišćenjem piksela.
Najčešće se koriste ključne reči, verovatno zato što su prilično jednostavne. One rade u paru, iako ne morate da navedete i jednu i drugu. Prvo navodite vertikalni deo a onda horizontalni. Vertikalni deo može da ima vrednosti "top", "center" or "bottom", a horizontalni "left", "center", or "right". Default vrednosti su "top" i "left". Ako hoćete da naša slika sa kojom smo radili do sada bude dole desno, možete iskoristiti sledeći kod:
body {
background-color: #ffffff;
background-image: url("background.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: bottom right;
}Pikseli se takođe lako upotrebljavaju. Ako želite da smestite pozadinsku sliku 100 piksela od leve ivice strane i 50 piksela od vrha, možete upotrebiti sledeći kod. Važno zapamtiti da kada koristite piksele ili procente da biste pozicionirali stranicu, najpre definišete horizontalni deo:
background-position: 100px 50px;Procenti su mnogo teži za upotrebu. Kada definišete procente, vi nećete uvek, kao sa pikselima, definisati gde će gornji levi ćošak pozadinske slike da se smesti. Na primer, ako želite da smestite sliku na 10% 10%, možda očekujete da će gornji levi ćošak biti na 10% od dužine stranice i na 10% od njene širine. To se neće desiti, jer će u praksi ona tačka na slici koja je na 10% od dužine slike i na 10% od njene širine biti pozicionirana na 10% od dužine stranice i na 10% od širine stranice. (Vredi napomenuti da isti princip važi kod ključnih reči - center je ekvivalentan sa 50% a right and bottom sa 100% što se tiče pozicioniranja - ključne reči su obično lakše za rad).
Iako mogu prouzročiti povremene probleme, procenti su ipak prilično laki za rad kada se naviknete. Na primer, ako želite da smestite sliku u sam centar strane, sledeći kod će smestiti centar slike na centar strane:
body {
background-color: #ffffff;
background-image: url("background.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 50% 50%;
}Lenjost i skraćeno pisanje koda
Sve u svemu, konačni delić koda je prilično koristan. Tu ima dosta da se kuca da bi se dodala pozadina. Ako želite da uštedite neko vreme, i nekoliko bajtova, možete da upotrebite kratice da postavite pozadinu. Ako se setite da postoje i default vrednosti za osobine, uštedećete čak i još više vremena i protoka.Skraćenica za kod iznad bi bila:
body {
background: #ffffff url("background.gif") no-repeat fixed bottom right;
}Nema potrebe da pišete svaku vrednost u gornjem kodu. Na primer, ako hoćete da postavite pozadinu na strani koristeći belu boju pozadine a da se slika ponavlja i pokreće kada skrolujete, mogli bi koristiti sledeće:
body {
background: #ffffff url("background.gif");
}
Ovo čini deklaraciju pozadine pristupačnijom ( i zapravo je ovaj način malo više podržan od svog dužeg alternativnog zapisa) .
Postati kreativniji
Imajući u vidu da se pozadina može priključiti pojedinačnom aspektu elementa, ne postoji razlog zašto ne biste koristili pozadine kao granice elemenata. Primenite granicu donjem delu linkova, uz pomoć malo padding-a, i imaćete veoma neobičan podvučeni efekat. Pozadine mogu biti primenjene praktično uz svaki element - iskoristite ih!Poteškoće sa Microsoft-om
Možda vam se pričinilo da upotrebom polu-transparentnih slika (na primer PNG-ova) možete da načinite neke veoma impresivne efekete. Na želost, Mikrosof nema pravu podršku za PNG format, što znači da ne možemo koristiti polutransparentne pozadine tako lako. Ali, nije sve izgubljeno. Ako želite polutransparentne pozadine, možete koristiti "AlphaImageLoader" Internet Eksplorera, što će načiniti slike prozirnim putem procenata da simulira efekat. Pošto je"AlphaImageLoader" vlasništvo Microsoft-a, to neće uticati na izgled vašeg sajta u drugim browser-ima.Pročitaj više!
