Ako želite umjesto pozadine u boji imati neku sliku, postoji način da to napravite pomoću CSS-a (može se i bez upotrebe CSS-a, ali pošto je CSS tako super i kul onda ćemo ga koristiti :)).
Najprije trebate pronaći sliku. Dozvoljeni formati su GIF, JPG (JPEG) i PNG, s time da su prva dva učestalija.
Onda je trebate uploadati na neki besplatni hosting.
Zatim trebate zapamtiti njenu adresu (kopirajte u Notepad, gdjegod). Ako koristite ImageShack budite sigurni da ste uzeli pravi kod! Naći ćete ga pod "Direct-link to image". Ta bi adresa trebala izgledati ovako nekako: http://www.server.com/slika.gif što naravno ovisi o servisu koji koristite. Ja ći koristiti ovu adresu kao primjer, a vi je (žalosno što to moram naglašavati) izbrišite i upišite umjesto nje svoju!
I sad nastupa ovaj tutorial. Napomena: ako ne znate gdje treba kopirati ove kodove, znači da ne znate dovoljno! Stoga trk na Uvod u CSS i Mijenjanje boja predloška.
Postoje dvije vrste pozadina, nešto što ljudi zovu wallpapers i ono što zovu backgrounds. Razlika je u tome što su wallpaperi ogromne slike sa milijunima boja koje se koriste na desktopu računala, a backgrounds (osim što ih možete staviti na desktop) služe i kao pozadine web stranica. Vi možete postaviti bilo kakvu sliku za pozadinu, ali molim vas razmislite dobro - ako je slika prevelika i sadrži mnogo boja, trebati će dosta vremena da se učita. Repeating backgrounds ili patterns su male slike koje se nastavljaju same na sebe, kao pločice. Ako mnogo takvih malih sličica postavite jednu do druge, one će se stopiti u veću i tako tvoriti veliku površinu. To se događa sa svim slikama kada ih postavimo kao pozadinu, osim ako ne odredimo drugačije.
Sliku postavljamo za pozadinu dokumenta tako da dodamo ovu liniju CSS-a:
Takva slika će se ponavljati cijelom širinom i visinom dokumenta.
Najčešće greške su da linkate sliku ovako:
...ili ovako:
...ili da ovaj kod upišete iza <body>:
Čitajte pažljivo što sam napisala, ovo su gotovi primjeri, prilično jednostavni za početak.
Ako želimo da se slika ponavlja samo u horizontalnom (vodoravnom) smjeru, tada kod izgleda ovako:
Da bi se slika ponavljala samo u vertikalnom smjeru, treba vam ovaj kod:
Ako ne želite da se slika ponavlja, onda je kod ovakav:
Ako želite da pozadinska slika stoji na mjestu dok scrollate sadržaj stranice, dodati ćete jednu liniju koja će osigurati da slika bude fiksirana:
Ako želite da slika bude centrirana i da se ne ponavlja:
Ako želite da slika bude na dnu desno, da se ne ponavlja i da bude fiksirana prilikom skrolanja:
Ovo što sam objasnila na primjeru za BODY vrijedi i za DIV-ove, tablice (TABLE), linkove (A), paragrafe teksta (P)...
Slika ne može biti rastegnuta preko cijelog ekrana! Putem CSS-a to je nemoguće, a zaobilaznim putem nije vrijedno truda. Ionako ne izgleda dobro već pikselizirano.