Sayfa Zemini Tamamen Kaplayan Resimler Tanımlamak

Bu işi sadece Background-size Özelliğini kullanarakda yapabiliriz , fakat her tarayıcı bunu desteklemiyor peki  peki desteklemeyen tarayıcılar için nasıl bir çözüm bulmalıyız?

CSS3 background-size ile basit şekilde yapalım

Çok basit bir kod ile istediğimize ulaşırız.


html {
       background: url(images/bg.jpg) no-repeat center center fixed;
       -webkit-background-size: cover;
       -moz-background-size: cover;
       -o-background-size: cover;
       background-size: cover;
}

 Arkaplan resmini http://interfacelift.com/wallpaper/details/2421/empty_bottles.html aldım.
html elementine vermemizin nedeni body tanımlamalarında bazı tarayıcılarda sorun yaşamamızdır. Kaydırma çubuğunun hareketi ile zemin resmi kaymaması için resmi sabitledik(fixed). cover özelliği ile resmi zemine yaydık.
İnternet Explorer 9 sürümünden önceki sürümlerinin bu özelliği desteklememesidir. İnternet Explorer için filter ile bir çözüm üretebiliriz.
Bu kod ile ie içinde çözüm üretilmiş olacaktır. Linklerde ve içerik seçmede bazı orunlar olabiliyor.

Tüm Tarayıcılar İçin Çözüm


<div id="tamEkranArdAlan"><img src="http://www.fatihhayrioglu.com/images/emptybottles.jpg" width="100%" height="100%" /></div>
<div id="icerik">
...
</div>
Sayfamızı içerik ve ardalan resmi olarak ikiye ayırıyoruz.
 html, body {height:100%; margin:0; padding:0;}
 Sayfanın boşluklarını sıfırlıyoruz.
#tamEkranArdAlan {position:fixed; top:0; left:0; width:100%; height:100%;}
Zemine yerleştirilecek resmi sabitleyip üstten ve soldan başlangıç noktasına yerleştiriyoruz ve genişlik ve yükseklik değerini %100 veriyoruz.
 #icerik {position:relative; z-index:1; width:650px; padding:20px; font:14px/1.8em Arial; margin:40px auto; border-radius:10px; color:#333; background-color:#fff}
 İçerik alanını postion:relative; z-index:1 değeri atayarak içerikteki seçilme ve linklerde sorun olmasını engelliyoruz. Diğer tanımlar içerik alanının görselliğini ayarlamak içindir.
Bu kodlar ie6 hariç çalışırken ie6’da çalışmıyor ie6’da çalışması için
*html {overflow-y:hidden;}
*html body {overflow-y:auto;}
*html #tamEkranArdAlan {position:absolute; z-index:-1;}
*html #icerik {position:static;padding:20px;}
 ie6 postipon:fixed desteklemediği için postion:absolute değeri tanımlıyoruz. İçerik alanınıdapostion:static tanımlıyoruz. Kaydırma çubuğu sorunlarını halletmek için body ve htmltanımlarımızı yapıyoruz.
Sonuç olarak tüm tarayıcılarda çalışan sayfa zeminini kapsayan zemin resmi tanımlamış olduk.

Kaynak: Fatih Hayrioğlu