Sposobnost rastezanja pozadinske slike u punoj širini prozora pregledača pomoću CSS-a pojavila se tek izdavanjem njegove najnovije specifikacije - CSS3. Nažalost, do sada veliki broj web surfera koristi rane pretraživače koji ne razumiju CSS3 specifikaciju. Stoga morate napraviti izbor - 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
Instrukcije
Korak 1
Prva opcija temelji se 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 ekrana u specifikaciji jezika za stari opis kaskadnog stila. Na dno slojeva trebate postaviti pozadinsku sliku, a na gornji će sav sadržaj stranice. Takva struktura u tijelu dokumenta može izgledati ovako:
Ovo će biti sadržaj stranice
A opis stilova za ovu strukturu treba staviti u zaglavlje. Na primjer, ovo:
html, body {
marža: 0px;
visina: 100%;
}
#background {
pozicija: apsolutna;
širina: 100%;
visina: 100%;
}
#body {
pozicija: apsolutna;
š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. Pored toga, 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 slučaju, to će biti iznad pozadinskog sloja, koji koristi zadani z-indeks.
Korak 2
Kompletni kod može izgledati ovako:
html, body {
marža: 0px;
visina: 100%;
}
#background {
pozicija: apsolutna;
širina: 100%;
visina: 100%;
}
#body {
pozicija: apsolutna;
širina: 100%;
visina: 100%;
z-indeks: 2;
}
Ovo će biti sadržaj stranice
Ne zaboravite zamijeniti ime datoteke pozadinske slike fon.png.
Korak 3
Druga opcija će koristiti svojstvo veličine pozadine uvedeno u CSS3. U isto vrijeme 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šnji centar bez ponavljanja fiksiran;
-webkit-background-size: naslovnica;
-moz-background-size: naslovnica;
-o-background-size: naslovnica;
veličina pozadine: naslovnica;
}
I ovdje ne zaboravite zamijeniti ime datoteke pozadinske slike fon.png. A u samom tijelu dokumenta u ovoj verziji nisu potrebne posebne konstrukcije.
