- 4 Mar 2009
- 2,217
- 1
Cross Browser, yani tüm tarayıcılarda aynı sonucu veren bir CSS makalesiyle daha beraberiz. Bugün, CSS ile tüm sayfayı kaplayan arka plan görüntüsünü nasıl oluşturulur? sorusunu cevaplayacağız. Gelişen web teknolojileri ve tarayıcı tepkileri sebebiyle bu basit tasarım artık daha kolay bir şekilde hazırlanabiliyor. Microsoftun DXImageTransform elemanlarından kurtulmak bizlerin işini fazlasıyla kolaylaştırmakta.
Hazırlayacağımız tasarım kısaca şunları yapacak :
ÖRNEĞİ GÖRÜNTÜLE
Nasıl yapılır
Tek yapmamız gereken bir CSS tanımlaması yapmak.
Böylece tekrarlanmayan, X ve Y düzleminde odaklanmış, sabitlenmiş ve BODY elemanı üzerine kaplanmış bir arkaplan görseli ekliyoruz.
Kapanış
Web tasarımı yaparken ne yazık ki birden fazla browser için ayrı tip kodlar yazmak zorunda kalıyoruz. Özellikle söz konusu Internet Explorer olunca bu süreç daha da zorlaşıyor. Hal böyleyken cross browser tanımlaması gittikçe önem kazanıyor. Bu makalemizde de tarayıcı uyumlu bir arkaplan tasarımı oluşturduk.
Hazırlayacağımız tasarım kısaca şunları yapacak :
- Tüm sayfayı en ufak bir boşluk bırakmadan kaplayacak.
- Gerekirse görseli küçültüp/büyültecek.
- Görselin aspect ratio değerini korur.
- Görseli sayfanın ortasına yerleştirir.
- Kaydırma çubuğunun görünmesine sebep olmaz.
- Tüm tarayıcılarda çalışır.
- Flash ile yapabileceğinizden daha hızlı ve kolay kullanım sağlar.
ÖRNEĞİ GÖRÜNTÜLE
Nasıl yapılır
Tek yapmamız gereken bir CSS tanımlaması yapmak.
Kod:
body{
background: url(arkaplan.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}Kapanış
Web tasarımı yaparken ne yazık ki birden fazla browser için ayrı tip kodlar yazmak zorunda kalıyoruz. Özellikle söz konusu Internet Explorer olunca bu süreç daha da zorlaşıyor. Hal böyleyken cross browser tanımlaması gittikçe önem kazanıyor. Bu makalemizde de tarayıcı uyumlu bir arkaplan tasarımı oluşturduk.
