Arka plan görüntüsünü CSS kullanarak tarayıcı penceresinin tam genişliğine kadar genişletme yeteneği, yalnızca en son özelliği olan CSS3'ün piyasaya sürülmesiyle ortaya çıktı. Ne yazık ki, şimdiye kadar çok sayıda web sörfçüsü, CSS3 spesifikasyonunu anlamayan eski tarayıcılar kullanıyor. Bu nedenle, bir seçim yapmalısınız - ya daha az kullanışlı, ancak tarayıcılar arası bir çözüm kullanın ya da yüksek teknoloji, ancak sınırlı bir kitle için. Her iki seçeneği de ele alalım.
Gerekli
Temel HTML ve CSS bilgisi
Talimatlar
Aşama 1
İlk seçenek, CSS dilinin önceki özelliklerine dayanmaktadır. Üst üste binen iki katmanı olan bir HTML kod yapısı oluşturmanız gerekir. Katmanlar (div), eski basamaklı stil açıklama dili belirtiminde ekranın genişliğine kadar uzatılabilir. Katmanların altına arka plan resmini yerleştirmeniz gerekir ve en üste sayfanın tüm içeriğini yerleştirirsiniz. Belgenin gövdesindeki böyle bir yapı şöyle görünebilir:
Bu sayfanın içeriği olacak
Ve bu yapı için stillerin açıklaması başlık kısmına yerleştirilmelidir. Örneğin, bu:
html, gövde {
kenar boşluğu: 0 piksel;
yükseklik: %100;
}
#arka fon {
pozisyon: mutlak;
genişlik: %100;
yükseklik: %100;
}
#vücut {
pozisyon: mutlak;
genişlik: %100;
yükseklik: %100;
z-endeksi: 2;
}
Burada, kimlikleri arka plan (bu sizin arka plan resminizdir) ve gövde (bu, sayfa içeriğinin katmanıdır) içeren katmanlar, mutlak konumlandırmaya ve %100 genişlik ve yüksekliğe ayarlanmıştır. Ek olarak, içerik katmanına bir seri numarası z-endeksi = 2 atanır. Katmanların "derinliğini" belirler - ne kadar büyükse, bu katman "alttan" o kadar uzakta bulunur. Bizim durumumuzda, varsayılan z-endeksini kullanan arka plan katmanının üzerinde olacaktır.
Adım 2
Tam kod şöyle görünebilir:
html, gövde {
kenar boşluğu: 0 piksel;
yükseklik: %100;
}
#arka fon {
pozisyon: mutlak;
genişlik: %100;
yükseklik: %100;
}
#vücut {
pozisyon: mutlak;
genişlik: %100;
yükseklik: %100;
z-endeksi: 2;
}
Bu sayfanın içeriği olacak
fon.
Aşama 3
İkinci seçenek, CSS3'te tanıtılan arka plan boyutu özelliğini kullanacaktır. Aynı zamanda, daha önce Mozilla Firefox, Google Chrome ve Opera tarayıcıları tarafından kullanılan stil tanımlarına benzer özellikler ekleyin. Bu sürümdeki stil açıklama bloğu şöyle görünebilir:
html {
arka plan: url (fon.png) tekrarsız merkez merkezi düzeltildi;
-webkit-background-size: kapak;
-moz-back-size: kapak;
-o-arka plan boyutu: kapak;
arka plan boyutu: kapak;
}
Ve burada fon.png"
