Sposobnost rastezanja pozadinske slike u cijelu širinu prozora preglednika pomoću CSS-a pojavila se tek izdavanjem njegove najnovije specifikacije - CSS3. Nažalost, zasad velik broj web surfera koristi rane preglednike koji ne razumiju CSS3 specifikaciju. Stoga morate odabrati - ili upotrijebiti manje prikladno rješenje s više pregledača ili visokotehnološku tehnologiju, ali za ograničenu publiku. Razmotrimo obje mogućnosti.
Potrebno
Osnovno znanje HTML-a i CSS-a
Upute
Korak 1
Prva se opcija temelji na ranijim specifikacijama CSS jezika. Morate stvoriti strukturu HTML koda koja ima dva preklapajuća sloja, jedan iznad drugog. Slojevi (div) se mogu razvući do širine zaslona u staroj specifikaciji jezika opisa kaskadnog stila. Na dno slojeva trebate postaviti pozadinsku sliku, a na vrh će sav sadržaj stranice. Takva struktura u tijelu dokumenta mogla bi izgledati ovako:
Ovo će biti sadržaj stranice
A opis stilova za ovu strukturu treba staviti u naslovni dio. Na primjer, ovo:
html, tijelo {
marža: 0px;
visina: 100%;
}
#background {
položaj: apsolutni;
širina: 100%;
visina: 100%;
}
#body {
položaj: apsolutni;
širina: 100%;
visina: 100%;
z-indeks: 2;
}
Ovdje su slojevi s pozadinom ID-a (ovo je vaša pozadinska slika) i tijelom (ovo je sloj za sadržaj stranice) postavljeni na apsolutno pozicioniranje i 100% širinu i visinu. Uz to, sloju sadržaja dodijeljen je serijski broj z-index = 2. On određuje "dubinu" slojeva - što je veći, to se dalje od "dna" nalazi ovaj sloj. U našem će slučaju biti iznad pozadinskog sloja, koji koristi zadani z-indeks.
Korak 2
Kompletni kod mogao bi izgledati ovako:
html, tijelo {
marža: 0px;
visina: 100%;
}
#background {
položaj: apsolutni;
širina: 100%;
visina: 100%;
}
#body {
položaj: apsolutni;
širina: 100%;
visina: 100%;
z-indeks: 2;
}
Ovo će biti sadržaj stranice
Ne zaboravite zamijeniti naziv datoteke pozadinske slike fon.png.
3. korak
Druga opcija koristit će svojstvo veličine pozadine uvedeno u CSS3. Istodobno dodajte slična svojstva definicijama stilova koje su prethodno koristili preglednici Mozilla Firefox, Google Chrome i Opera. Blok opisa stila u ovoj verziji može izgledati ovako:
html {
pozadina: url (fon.png) središnje središte bez ponavljanja fiksno;
-webkit-background-size: naslovnica;
-moz-background-size: naslovnica;
-o-background-size: naslovnica;
veličina pozadine: naslovnica;
}
I ovdje ne zaboravite zamijeniti naziv datoteke pozadinske slike fon.png. I u samom tijelu dokumenta u ovoj verziji nisu potrebne posebne konstrukcije.
