Kılavuz Yazılım / Css / Css ile Tam Sayfa Arkaplan Resmi

Css ile Tam Sayfa Arkaplan Resmi

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

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)
5 (100%) 1 Oy

Bir önceki yazımız olan Youtube Videolarını CSS ile Responsive Yapmak başlıklı makalemizi de okumanızı öneririz.

Hakkında Admin

Mehmet K. | Çukurova Üniversitesi bilgisayar programcılığı bölümü mezunu. Birçok kurumsal firma'da Software Developer olarak çalıştı. Bilgi ve tecrübelerini bu blog'tan paylaşıyor.

Öneriyoruz

Youtube Videolarını CSS ile Responsive Yapmak

Sayfanızın her hangi yerinde Youtube ‘dan iframe ile video gösterebilirsiniz. Telefon ile baktığınız sayfanızda mobil ...

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir