CSS ile Tam Ekran Arkaplan

Full Background

“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. Microsoft’un DXImageTransform elemanlarından kurtulmak bizlerin işini fazlasıyla kolaylaştırmakta.

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.

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;
}

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.

Bir sonraki CSS dersimizde görüşmek üzere, hoşçakalın.