Možnost raztezanja slike ozadja na celotno širino okna brskalnika s pomočjo CSS se je pojavila šele z izdajo njene najnovejše specifikacije - CSS3. Žal doslej veliko število spletnih deskarjev uporablja zgodnje brskalnike, ki ne razumejo specifikacije CSS3. Zato se morate odločiti - ali uporabiti manj priročno, vendar medbrskalniško rešitev ali visokotehnološko, vendar za omejeno občinstvo. Upoštevajmo obe možnosti.
Potrebno
Osnovno znanje HTML in CSS
Navodila
Korak 1
Prva možnost temelji na prejšnjih specifikacijah jezika CSS. Ustvariti morate strukturo kode HTML, ki ima dve prekrivajoči se plasti, eno nad drugo. Plasti (div) je mogoče raztegniti na širino zaslona v stari specifikaciji jezika za opis kaskadnega sloga. Na dnu slojev morate postaviti sliko za ozadje, v zgornjo pa bo vsa vsebina strani. Takšna struktura v telesu dokumenta bi lahko izgledala takole:
To bo vsebina strani
Opis slogov za to strukturo naj bo v naslovu. Na primer to:
html, body {
marža: 0px;
višina: 100%;
}
#background {
položaj: absolutno;
širina: 100%;
višina: 100%;
}
#body {
položaj: absolutno;
širina: 100%;
višina: 100%;
z-indeks: 2;
}
Tu so plasti z ozadjem ID-jev (to je vaša slika v ozadju) in telo (to je sloj za vsebino strani) nastavljene na absolutno pozicioniranje ter 100% širino in višino. Poleg tega je vsebinskemu sloju dodeljena serijska številka z-index = 2. Določa "globino" slojev - večja je, dlje od "dna" se nahaja ta plast. V našem primeru bo nad slojem ozadja, ki uporablja privzeti z-indeks.
2. korak
Celotna koda je lahko videti tako:
html, body {
marža: 0px;
višina: 100%;
}
#background {
položaj: absolutno;
širina: 100%;
višina: 100%;
}
#body {
položaj: absolutno;
širina: 100%;
višina: 100%;
z-indeks: 2;
}
To bo vsebina strani
Ne pozabite zamenjati imena datoteke slike za ozadje fon.png.
3. korak
Druga možnost bo uporabila lastnost velikosti ozadja, uvedeno v CSS3. Hkrati dodajte podobne lastnosti definicijam slogov, ki so jih prej uporabljali brskalniki Mozilla Firefox, Google Chrome in Opera. Blok opisa sloga v tej različici je lahko videti tako:
html {
ozadje: url (fon.png) središče središča brez ponovitve je fiksno;
-webkit-background-size: naslovnica;
-moz-velikost ozadja: naslovnica;
-o-velikost-ozadja: naslovnica;
velikost ozadja: naslovnica;
}
In tu ne pozabite zamenjati imena datoteke slike za ozadje fon.png. In v samem telesu dokumenta v tej različici niso potrebne posebne konstrukcije.
