Css ile Tam Sayfa Arkaplan Resmi

Front End Developer’ların yani tasarımın ön kısmını kodlayan yazılımcıların özel tasarımların html’e dökülme aşamasında kullandıkları bir yöntem olan arkaplan resmini css ile full olarak ayarlamayı göstereceğiz.

Tabi bazen bu tarz ihtiyaçlar duyduğunuzda, bu ihtiyacınızı gidermek için başvuracağınız doğal yol css’dir. Tasarımın görselliğinin bütünleştirildiği, özel sınıf tanımlamaları ile tasarımın temel iskeletinin etlere bürünmesini css ile sağlayabiyoruz.

Buradaki amaç, her zaman tüm tarayıcı penceresini kapsayan bir web sitesindeki arka plan resmidir. Üzerinde bazı özellikler koyalım:

• Sayfanın tamamını görüntüyle doldurur, beyaz boşluk olmaz
• Görüntüyü gerektiği gibi ölçeklendirir
• Görüntü oranlarını korur (en boy oranı)
• Resim sayfada ortalanmış olur
• Kaydırma çubuklarına neden olmaz
• Çoğu web tarayıcıları ile uyumludur

Css ile Tam Sayfa Arkaplan Resmi Ayarlama

Şimdi CSS3’teki background-size özelliği sayesinde bunu tamamen CSS üzerinden yapabiliriz. Tanımla olarak Html öğesini kullanacağız yada body öğesinide kullanabiliriz.

Üzerinde sabit ve ortalanmış bir arka plan belirledik, sonra kapak anahtar kelimesine ayarlanmış arka plan boyutunu kullanarak boyutunu ayarladık. Örnek css kullanımı ise şu şekildedir;

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

Bu kodların desteklendiği tarayıcı ve sürümleri şu şekilde.

Çalıştığı Platformlar;

• Safari 3+
• Chrome bütün sürümleri +
• Internet Explorer 9+
• Opera 10+ (Opera 9.5 sürümünde arka plan boyutunu destekledi, ancak anahtar kelimeleri değil)
• Firefox 3.6+ (Firefox 4, satıcı olmayan ön ek sürümünü destekler)