A háttérkép CSS használatával a böngészőablak teljes szélességére való kinyújtásának lehetősége csak a legújabb specifikáció - a CSS3 - kiadásával jelent meg. Sajnos eddig számos webes szörfös olyan korai böngészőt használ, amely nem érti a CSS3 specifikációt. Ezért választania kell - vagy használjon kevésbé kényelmes, de böngészőkön átívelő megoldást, vagy csúcstechnológiás, de korlátozott közönség számára. Vizsgáljuk meg mindkét lehetőséget.
Szükséges
HTML és CSS alapismeretek
Utasítás
1. lépés
Az első lehetőség a CSS nyelv korábbi specifikációin alapul. Létre kell hoznia egy HTML kódstruktúrát, amely két, egymást átfedő réteggel rendelkezik. A rétegek (div) a képernyő szélességéig nyújthatók a régi lépcsőzetes stílusleíró nyelvspecifikációban. A rétegek alján el kell helyezni a háttérképet, a felső pedig az oldal teljes tartalmát. A dokumentum törzsének ilyen szerkezete így nézhet ki:
Ez lesz az oldal tartalma
Ennek a szerkezetnek a stílusleírását pedig a címsorban kell elhelyezni. Például ez:
html, body {
margó: 0px;
magasság: 100%;
}
#háttér {
pozíció: abszolút;
szélesség: 100%;
magasság: 100%;
}
#body {
pozíció: abszolút;
szélesség: 100%;
magasság: 100%;
z-index: 2;
}
Itt az azonosítójú háttérrel (ez a háttérkép) és a törzs (az oldal tartalmának rétege) abszolút pozicionálásra, valamint 100% szélességre és magasságra van beállítva. Ezenkívül a tartalmi réteg z-index = 2 sorszámot kap. Ez meghatározza a rétegek "mélységét" - minél nagyobb, annál "alulról" helyezkedik el ez a réteg. Esetünkben a háttérréteg felett lesz, amely az alapértelmezett z-indexet használja.
2. lépés
A teljes kód így nézhet ki:
html, body {
margó: 0px;
magasság: 100%;
}
#háttér {
pozíció: abszolút;
szélesség: 100%;
magasság: 100%;
}
#body {
pozíció: abszolút;
szélesség: 100%;
magasság: 100%;
z-index: 2;
}
Ez lesz az oldal tartalma
Ne felejtse el kicserélni a fon.
3. lépés
A második lehetőség a CSS3-ban bevezetett háttérméret tulajdonságot fogja használni. Ugyanakkor adjon hozzá hasonló tulajdonságokat a stílusdefiníciókhoz, amelyeket korábban a Mozilla Firefox, a Google Chrome és az Opera böngészők használtak. A stílusleíró blokk ebben a verzióban így nézhet ki:
html {
háttér: url (fon.png) nincs ismétlődő középpont rögzítve;
-webkit-background-size: borító;
-moz-háttérméret: borító;
-o-background-size: borító;
háttérméret: borító;
}
És itt ne felejtse el kicserélni a fon.png"
