Arxa fon şəklini CSS-dən istifadə edərək brauzer pəncərəsinin tam genişliyinə qədər uzatma qabiliyyəti yalnız son spesifikasiyası - CSS3-in buraxılması ilə ortaya çıxdı. Təəssüf ki, indiyə qədər çox sayda veb sörfçü CSS3 spesifikasiyasını anlamayan erkən brauzerlərdən istifadə edir. Buna görə bir seçim etməlisiniz - ya daha az uyğun, lakin brauzerlərarası bir həll istifadə edin, ya da yüksək texnologiyalı, lakin məhdud bir auditoriya üçün. Hər iki variantı da nəzərdən keçirək.
Zəruri
HTML və CSS haqqında əsas biliklər
Təlimat
Addım 1
Birinci seçim CSS dilinin əvvəlki xüsusiyyətlərinə əsaslanır. Bir-birinin üstündə iki üst-üstə düşən qat olan bir HTML kod quruluşu yaratmalısınız. Qatlar (div) köhnə kaskad üslubun təsviri dil spesifikasiyasında ekranın eninə qədər uzana bilər. Qatların alt hissəsində arxa plan şəklini yerləşdirməlisiniz, üst hissədə isə səhifənin bütün məzmununu yerləşdirəcəksiniz. Sənədin gövdəsindəki belə bir quruluş belə görünə bilər:
Bu səhifənin məzmunu olacaq
Və bu quruluş üçün üslubların təsviri başlıq hissəsində yerləşdirilməlidir. Məsələn, bu:
html, gövdə {
margin: 0px;
hündürlük: 100%;
}
#fon {
mövqe: mütləq;
genişlik: 100%;
hündürlük: 100%;
}
#body {
mövqe: mütləq;
genişlik: 100%;
hündürlük: 100%;
z-indeks: 2;
}
Burada şəxsiyyət vəsiqəsinin arxa planı (bu sizin arxa plan şəklinizdir) və gövdəsi (bu səhifə məzmunu üçün təbəqədir) mütləq yerləşdirmə və 100% eninə və hündürlüyə quraşdırılmışdır. Bundan əlavə, məzmun qatına bir seriya nömrəsi verilir z-indeks = 2. Qatların "dərinliyini" müəyyənləşdirir - nə qədər böyükdürsə, bu təbəqə "alt" dan bir o qədər uzaqlaşır. Bizim vəziyyətimizdə, z-indeksini istifadə edən arxa plan qatının üstündə olacaqdır.
Addım 2
Tam kod belə görünə bilər:
html, gövdə {
margin: 0px;
hündürlük: 100%;
}
#fon {
mövqe: mütləq;
genişlik: 100%;
hündürlük: 100%;
}
#body {
mövqe: mütləq;
genişlik: 100%;
hündürlük: 100%;
z-indeks: 2;
}
Bu səhifənin məzmunu olacaq
Arxa fon şəklinin adını fon.
Addım 3
İkinci seçim CSS3-də təqdim olunan fon ölçüsü xüsusiyyətindən istifadə edəcəkdir. Eyni zamanda, əvvəllər Mozilla Firefox, Google Chrome və Opera brauzerləri tərəfindən istifadə olunan stil təriflərinə oxşar xüsusiyyətlər əlavə edin. Bu versiyadakı stil təsviri bloku belə görünə bilər:
html {
arxa plan: url (fon.png) təkrarlanmayan mərkəz mərkəzi düzəldildi;
-webkit-background-size: örtük;
-moz-background-size: örtük;
-fon ölçüsü: örtük;
arxa ölçülü: örtük;
}
Və burada fon.png"
