Galimybė išplėsti fono vaizdą iki viso naršyklės lango pločio naudojant CSS atsirado tik išleidus naujausią jos specifikaciją - CSS3. Deja, kol kas didelė dalis interneto naršytojų naudoja ankstyvąsias naršykles, kurios nesupranta CSS3 specifikacijos. Todėl jūs turite pasirinkti - arba naudoti ne tokį patogų, bet kelių naršyklių sprendimą, arba aukštųjų technologijų, bet ribotai auditorijai. Apsvarstykime abu variantus.
Būtinas
Pagrindinės žinios apie HTML ir CSS
Nurodymai
1 žingsnis
Pirmoji parinktis pagrįsta ankstesnėmis CSS kalbos specifikacijomis. Turite sukurti HTML kodo struktūrą, kurią sudaro du vienas virš kito esantys sluoksniai. Sluoksniai (div) gali būti ištempti iki ekrano pločio pagal seną kaskadinio stiliaus aprašymo kalbos specifikaciją. Sluoksnių apačioje turite įdėti fono paveikslėlį, o viršuje - visą puslapio turinį. Tokia dokumento struktūros struktūra gali atrodyti taip:
Tai bus puslapio turinys
Šios struktūros stilių aprašymas turėtų būti dedamas antraštės dalyje. Pavyzdžiui:
HTML, body {
paraštė: 0px;
aukštis: 100%;
}
#background {
pozicija: absoliuti;
plotis: 100%;
aukštis: 100%;
}
#kūnas {
pozicija: absoliuti;
plotis: 100%;
aukštis: 100%;
z indeksas: 2;
}
Čia sluoksniai su ID fonu (tai yra jūsų fono paveikslėlis) ir turinys (tai yra puslapio turinio sluoksnis) nustatomi pagal absoliučią padėtį ir 100% plotį ir aukštį. Be to, turinio sluoksniui priskiriamas serijos numeris z-index = 2. Jis nustato sluoksnių „gylį“- kuo jis didesnis, tuo toliau nuo „apačios“yra šis sluoksnis. Mūsų atveju jis bus virš fono sluoksnio, kuriame naudojamas numatytasis z indeksas.
2 žingsnis
Visas kodas gali atrodyti taip:
HTML, body {
paraštė: 0px;
aukštis: 100%;
}
#background {
pozicija: absoliuti;
plotis: 100%;
aukštis: 100%;
}
#kūnas {
pozicija: absoliuti;
plotis: 100%;
aukštis: 100%;
z indeksas: 2;
}
Tai bus puslapio turinys
Nepamirškite pakeisti fono paveikslėlio failo pavadinimo fon.png.
3 žingsnis
Antroje parinktyje bus naudojama fono dydžio ypatybė, pristatyta CSS3. Tuo pačiu metu prie stiliaus apibrėžimų, kuriuos anksčiau naudojo naršyklės „Mozilla Firefox“, „Google Chrome“ir „Opera“, pridėkite panašių savybių. Šios versijos stiliaus aprašymo blokas gali atrodyti taip:
HTML {
fonas: url (fon.png) centras nesikartoja, fiksuotas centras;
-webkit-background-size: viršelis;
-moz-background-size: viršelis;
-ofono dydis: viršelis;
fono dydis: viršelis;
}
Ir čia nepamirškite pakeisti fono paveikslėlio failo pavadinimo fon.png. Pačiame dokumento tekste šioje versijoje nereikia jokių specialių konstrukcijų.
