CSS-dan foydalangan holda fon rasmini brauzer oynasining to'liq kengligiga cho'zish qobiliyati faqat uning so'nggi spetsifikatsiyasi - CSS3 chiqishi bilan paydo bo'ldi. Afsuski, hozirga qadar veb-surferlarning katta qismi CSS3 spetsifikatsiyasini tushunmaydigan dastlabki brauzerlardan foydalanmoqda. Shuning uchun, siz tanlov qilishingiz kerak - yoki unchalik qulay bo'lmagan, ammo o'zaro faoliyat brauzer echimidan yoki yuqori texnologiyalardan foydalaning, ammo cheklangan auditoriya uchun. Keling, ikkala variantni ham ko'rib chiqaylik.
Kerakli
HTML va CSS haqida asosiy bilimlar
Ko'rsatmalar
1-qadam
Birinchi variant CSS tilining oldingi xususiyatlariga asoslanadi. Siz bir-birining ustiga ustma-ust keladigan ikkita qatlamga ega bo'lgan HTML kod tuzilishini yaratishingiz kerak. Qatlamlar (div) eski kaskadli uslub ta'rifi tilining spetsifikatsiyasida ekranning kengligigacha cho'zilishi mumkin. Qatlamlarning pastki qismida siz fon rasmini, yuqori qismida esa sahifaning barcha tarkibini joylashtirishingiz kerak. Hujjat tarkibidagi bunday tuzilma quyidagicha ko'rinishi mumkin:
Bu sahifaning mazmuni bo'ladi
Va ushbu tuzilish uchun uslublarning tavsifi sarlavha qismida joylashtirilishi kerak. Masalan, bu:
HTML, tanasi {
margin: 0px;
balandligi: 100%;
}
#background {
pozitsiya: mutlaq;
kengligi: 100%;
balandligi: 100%;
}
#body {
pozitsiya: mutlaq;
kengligi: 100%;
balandligi: 100%;
z-indeks: 2;
}
Bu erda identifikatorlar fonlari (bu sizning fon rasmingiz) va tanasi (bu sahifa tarkibidagi qatlam) mutlaq joylashishga va 100% kenglik va balandlikka o'rnatiladi. Bundan tashqari, kontent qatlamiga z-indeks = 2. tartib raqami beriladi, u qatlamlarning "chuqurligini" aniqlaydi - qanchalik katta bo'lsa, ushbu qatlam "pastki" dan qanchalik uzoqroq joylashgan bo'lsa. Bizning holatda, u standart z-indeksidan foydalanadigan fon qatlami ustida bo'ladi.
2-qadam
To'liq kod quyidagicha ko'rinishi mumkin:
HTML, tanasi {
margin: 0px;
balandligi: 100%;
}
#background {
pozitsiya: mutlaq;
kengligi: 100%;
balandligi: 100%;
}
#body {
pozitsiya: mutlaq;
kengligi: 100%;
balandligi: 100%;
z-indeks: 2;
}
Bu sahifaning mazmuni bo'ladi
Fonning fon.
3-qadam
Ikkinchi variantda CSS3-da kiritilgan fon o'lchamlari xususiyati ishlatiladi. Shu bilan birga, Mozilla Firefox, Google Chrome va Opera brauzerlari tomonidan ilgari ishlatilgan uslub ta'riflariga o'xshash xususiyatlarni qo'shing. Ushbu versiyadagi uslubni tavsiflash bloki quyidagicha ko'rinishi mumkin:
HTML {
fon: url (fon.png) takrorlanadigan markaziy markaz o'rnatilmagan;
-webkit-background-size: muqova;
-moz-background-size: qopqoq;
-fon-o'lcham: qopqoq;
fon hajmi: qopqoq;
}
Va bu erda fon.png"
