Bu makalede farklı tarayıcılar için sayfamızın zeminini tam kaplayan ardalan resimlerini nasıl tanımlayacağımızı anlatmaya çalışacağım.

CSS3 background-size ile basit şekilde yapalım

Bir önceki makalede de anlattığım gibi background-size özelliği bu iş için biçilmiş kaftandır. Ç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;
}

Bir örnek yapalım

html{
    background:url("zemin_resmi.jpg") 0 0 no-repeat fixed;
    background-size:cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
}

Örneği görmek için tıklayınız.

Ardalan 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. Daha detaylı bilgi için tıklayınız.

İ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.

    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.zemin_resmi.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='zemin_resmi.jpg', sizingMethod='scale')";

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ıda postion:static tanımlıyoruz. Kaydırma çubuğu sorunlarını halletmek için body ve html tanımlarımızı yapıyoruz.

Sonuç olarak tüm tarayıcılarda çalışan sayfa zeminini kapsayan zemin resmi tanımlamış olduk.

Sonuç

Sonuç olarak CSS3 ile birlikte gelen background-size özelliği tam işimizi görsede İnternet Explorer’un desteklememesi projelerimizde uygulamak için bizi düşündürüyor.

Tüm tarayıcıların desteklediği ikinci yöntem sadece CSS ile çözüm ürettiği için tercih edilebilir. Ayrıca javascript ile bazı çözümler olsa da ben css ile çözümü olan bir kodu javascript ile çözme taraftarı değilim. Javascript uygulamaları için http://css-tricks.com/3458-perfect-full-page-background-image/ linkindeki örnekleri incelemenizi öneriyorum.

Baktığım sitelerdeki uygulanabilir bu iki yöntemi sizlerle paylaştım uyguladıkça ve diğer yöntemleri gördükçe buraya ekleme yapabilirim. Birazda ihtiyaca göre yöntem uygulamak gerekiyor bu işte.

Kalın sağlıcakla

Kaynaklar

• http://css-tricks.com/3458-perfect-full-page-background-image/
• http://cookbooks.adobe.com/post_Scale_Background_image_to_browser_size-17590.html
• http://www.paulmccrodden.com/2011/02/problems-css3-background-size-cover-iefilters/
• http://www.pziecina.com/design/turorial_demos/resize_background.php
• http://css-tricks.com/766-how-to-resizeable-background-image/
• http://paulmason.name/blog/item/full-screen-background-image-pure-css-code
• http://www.quackit.com/html/codes/html_stretch_background_image.cfm
• http://www.cssplay.co.uk/layouts/background.html

Arkaplan Resmi kaydırmaca tanımlamasını cemsid‘den aldım. CSS ile menü yapımı serimize devam ediyoruz. CSS ile yapılan bir çok menü örneği mevcut biz burada bunları katagorize edip her bir katagoriye bir örnek yaparak mantığını anlatmaya çalıyoruz, mantığını anladıktan sonra CSS ile yapılan tüm menüleri yapabileceğimize inanıyorum.

CSS menülerinin vazgeçilmezi sırasız listeleri(<ul>) kullanarak her bir linkin iki resimi bulunan(bir normal hali, diğeri fare imlecinin üzerine gelince görünecek resim) menü oluşturacağız.

Bu menü sayfa yüklenmeden yüklendiği için javascript ile yapılan rollover menülerden avantajlıdır ve Internet Explorer’da Temporary Internet Files > Settings > ‘Every visit to page.’ seçeneği seçili olan kullanıcılar için biçilmiş kaftandır. Ayrıca CSS ile yapılan menülerdeki avantajlara(kolay ekleme ve düzenleme, esnek yapı vb.) sahiptir tabi ki.

Bu metod cemsid’inde açıkladığı gibi arkaplan resmi(background-image) kaydırarak yapılıyor. Genelde bu tip menüler resim içeren veya anti-aliased metinlerin kullanıldığı durumlarda kullanılır.

<ul id="menu" >
<li id="elma"><a href="#" title="Elma">Elma</a></li>
<li id="armut"><a href="#" title="Armut">Armut</a></li>
<li id="muz"><a href="#" title="Muz">Muz</a></li>
<li id="kivi"><a href="#" title="Kivi">Kivi</a></li>
</ul>

Görüldüğü gibi diğer menü başlangıcından farkı olmayan-bir ek hariç- bir kodlama. Hariç olan ek her menu elemanına bir id atamamız. Çünkü her menü elemanı için bir resim tanımlaması yapacağız. Manav dükkanı açıyoruz :)

şžimdi menümüzü oluşturan resimi hazırlamaya geldi sıra. Menü resmini oluştururken bir normal halini ve hemen altına fare imleci üzerine geldiğindeki halini koyup resmi kaydedeceğiz. Bu işlem için Photosohop, Firefowrk, PaintShopPro vb. programlar kullanabilrisiniz.

Menüdeki margin, padding ve imgeleri kaldıralım. Boyutlarını ve konumunu tanımlayalım:

ul#menu {
    height: 54px;
    width: 500px;
    margin: 0;
    padding: 0;
    position: relative;
}

Menümüzü yatay olarak sıralamak için

ul#menu li {
    list-style: none;
    position: absolute;
}

Menü elemanlarının yükseklikleri sabit olduğu için hepsine ortak tanımlama yapıyoruz, hepsini kendine has kapsama alanı olması için blokladık(display:block) ve konumlandırdık(postion:relative).

ul#menu li a {
    height: 54px;
    display: block;
    position:relative;
}

Her menü elemanı için kendi genişliği ve arkaplan resmindeki(menu.jpg) yerini belirleyelim.

#elma a{
    width:130px;
    background: url(images/menu.jpg) 0 0 no-repeat;
}
#armut a{
    width:142px;
    background: url(images/menu.jpg) -130px 0 no-repeat;
}
#muz a{
    width:120px;
    background: url(images/menu.jpg) -272px 0 no-repeat;
}
#kivi a{
    width:108px;
    background: url(images/menu.jpg) -392px 0 no-repeat;
}

ve tüm menü elementlerinin soldan konumu belirleyelim.

#elma {left: 0px;}
#armut {left: 130px;}
#muz {left: 272px;}
#kivi {left: 392px;}

Resimler üzerindeki metinleri kaldırmak için

ul#menu li a {
    text-indent: -9999px;
    text-decoration: none;
}

Menümüz tamam. şžimdi de rollover efekti vermek için a:hover arkaplan resimlerinin konumunu belirleyelim. Konumunu yazarken sadece yükseliği üstten konumu değiştirdiğimize dikkat edin.

#elma a:hover{
    width:130px;
    background: url(images/menu.jpg) 0 -54px no-repeat;
}
#armut a:hover{
    width:142px;
    background: url(images/menu.jpg) -130px -54px no-repeat;
}
#muz a:hover{
    width:120px;
    background: url(images/menu.jpg) -272px -54px no-repeat;
}
#kivi a:hover{
    width:108px;
    background: url(images/menu.jpg) -392px -54px no-repeat;
}

Son olarakta bir bölümde olduğunda o bölümün aktif görünmesini sağlamak için, genel de bunu için a:hover durumu normal durum olarak tanımlanır. Bizde öyle yapalım. Mesela Muz bölümünde olduğumuzu farz edelim.

<ul id="menu" >
    <li id="elma"><a href="#" title="Elma">Elma</a></li>
    <li id="armut"><a href="#" title="Armut">Armut</a></li>
    <li id="muz"><a href="#" title="Muz" class="secili" >Muz</a></li>
    <li id="kivi"><a href="#" title="Kivi">Kivi</a></li>
</ul>

#elma a.secili{
    width:130px;
    background: url(images/menu.jpg) 0 -54px no-repeat;
}
#armut a.secili{
    width:142px;
    background: url(images/menu.jpg) -130px -54px no-repeat;
}
#muz a.secili{
    width:120px;
    background: url(images/menu.jpg) -272px -54px no-repeat;
}
#kivi a.secili{
    width:108px;
    background: url(images/menu.jpg) -392px -54px no-repeat;
}

Örnek kodları indirmek için tıklayınız.