Mundësia për të shtrirë imazhin e sfondit në gjerësinë e plotë të dritares së shfletuesit duke përdorur CSS u shfaq vetëm me lëshimin e specifikimeve të tij më të fundit - CSS3. Fatkeqësisht, deri më tani një numër i madh shfletuesish në internet po përdorin shfletues të hershëm që nuk i kuptojnë specifikimet CSS3. Prandaj, duhet të bëni një zgjedhje - ose përdorni një zgjidhje më pak të përshtatshme, por ndër-shfletuese, ose një teknologji të lartë, por për një audiencë të kufizuar. Le të shqyrtojmë të dy opsionet.
E nevojshme
Njohuri themelore të HTML dhe CSS
Udhëzimet
Hapi 1
Opsioni i parë bazohet në specifikimet e mëparshme të gjuhës CSS. Ju duhet të krijoni një strukturë të kodit HTML që ka dy shtresa të mbivendosura, njëra mbi tjetrën. Shtresat (div) mund të shtrihen në gjerësinë e ekranit në specifikimin e gjuhës së përshkrimit të stilit të vjetër kaskadë. Në pjesën e poshtme të shtresave duhet të vendosni imazhin e sfondit, dhe në pjesën e sipërme do të vendosni të gjithë përmbajtjen e faqes. Një strukturë e tillë në trupin e dokumentit mund të duket kështu:
Kjo do të jetë përmbajtja e faqes
Dhe përshkrimi i stileve për këtë strukturë duhet të vendoset në pjesën e kreut. Për shembull, kjo:
html, trupi {
diferencë: 0px;
lartësia: 100%;
}
# prapavijë {
pozicioni: absolut;
gjerësia: 100%;
lartësia: 100%;
}
# trup {
pozicioni: absolut;
gjerësia: 100%;
lartësia: 100%;
indeksi z: 2;
}
Këtu shtresat me sfond ID (kjo është imazhi juaj i sfondit) dhe trupi (kjo është shtresa për përmbajtjen e faqes) vendosen në pozicionimin absolut dhe 100% gjerësinë dhe lartësinë. Përveç kësaj, shtresës së përmbajtjes i është caktuar një numër serik z-indeks = 2. Përcakton "thellësinë" e shtresave - sa më e madhe të jetë, aq më larg nga "poshtë" ndodhet kjo shtresë. Në rastin tonë, do të jetë mbi shtresën e sfondit, e cila përdor indeksin e parazgjedhur z.
Hapi 2
Kodi i plotë mund të duket kështu:
html, trupi {
diferencë: 0px;
lartësia: 100%;
}
# prapavijë {
pozicioni: absolut;
gjerësia: 100%;
lartësia: 100%;
}
# trup {
pozicioni: absolut;
gjerësia: 100%;
lartësia: 100%;
indeksi z: 2;
}
Kjo do të jetë përmbajtja e faqes
Mos harroni të zëvendësoni emrin e skedarit të imazhit në sfond fon.png.
Hapi 3
Opsioni i dytë do të përdorë pronën me madhësi sfondi të prezantuar në CSS3. Në të njëjtën kohë, shtoni veti të ngjashme në përkufizimet e stilit që janë përdorur më parë nga shfletuesit Mozilla Firefox, Google Chrome dhe Opera. Blloku i përshkrimit të stilit në këtë version mund të duket kështu:
html {
sfondi: url (fon.png) fiksohet qendra pa përsëritje e qendrës;
-mbajtja-sfond-madhësia: kopertina;
-moz-madhësia-sfond: kopertina;
-o-sfond-madhësia: kopertina;
madhësia e sfondit: kopertina;
}
Dhe këtu mos harroni të zëvendësoni emrin e skedarit të imazhit në sfond fon.png. Dhe në pjesën e vetë dokumentit, nuk kërkohen ndërtime të veçanta në këtë version.
