Blogda şu anda daha önce kullandığım temanın arkaplan resmi her çözünürlükte ekranı tamamen kaplamakta kaplamaktaydı (farketmeyenler / görmeyenler için). Bu işlemi dinamik olarak yaptırmak için takla üstüne takla attım, fellik fellik Google’da aradım; en sonunda en makul olanını buldum ve uyguladım.

Öncelikle şunu söylemem gerekli CSS‘e dinamik arkaplan resmi özelliği 3. versiyon ile birlikte gelecekmiş o yüzden direk CSS’ten verip geçseydin diye kestirip atmayın, zor işmiş

Ekran çözünürlüğü istemci tarafında ancak Javascript ile alınabiliyor. Bu yüzden CSS class’ımızı oluşturduktan sonra Javascript ile sayfanın yüklenmesinin ardından bu class’ı dinamik olarak değiştirerek arkaplan resminin yüklemesini sağlayacağız. İsterseniz uygulamaya geçelim:

En başta arkaplan resmi nasıl olacak onu belirlemek lazım. Ben bu örnekte belli başlı ekran çözünürlükleri için ayrı ayrı kaydedilmiş resimleri kullandım fakat PHP gibi diller kullanarak sunucu tarafında resim dinamik olarak da boyutlandırılabilir. Oluşturduğum resimler:

Oluşturulan Resimler

Sonrasında body HTML etiketi için bir CSS class tanımlaması oluşturup bunu istediğimiz bir yöntem ile (style etiketi veya css dosyası içerisinde) sayfamıza ekliyoruz:

body {
  background-attachment : fixed;
  background-position : center center;
  background-repeat : no-repeat;
  margin : 0px;
  background-color : #EEEEEE;
}

Görüldüğü gibi class tanımlamamızda arkaplan resim tanımı yok. Arkaplan resim tanımlamasını sayfa yüklendikten sonra dinamik olarak bu class’a ekleyeceğiz.

Aşağıdaki Javascript fonksiyonunu dilediğimiz bir yöntemle sayfamıza ekliyoruz. Bir çok metod denedim fakat aralarında en sorunsuz çalışanı aşağıdaki fonksiyon oldu

function changecss(theClass, element, value) {
  var cssRules;
 
  if (document.all) {
    cssRules = 'rules';
  } else if (document.getElementById) {
    cssRules = 'cssRules';
  }
 
  var added = false;
 
  for (var S = 0; S < document.styleSheets.length; S++) {
    for (var R = 0; R < document.styleSheets[S][cssRules].length; R++) {
      if (document.styleSheets[S][cssRules][R].selectorText == theClass) {
        if(document.styleSheets[S][cssRules][R].style[element]) {
          document.styleSheets[S][cssRules][R].style[element] = value;
          added = true;
          break;
        }
      }
    }
 
    if(!added){
      if(document.styleSheets[S].insertRule) {
        document.styleSheets[S].insertRule(theClass + ' { ' + element + ': ' + value + '; }',document.styleSheets[S][cssRules].length);
      } else if (document.styleSheets[S].addRule) {
        document.styleSheets[S].addRule(theClass, element + ': ' + value + ';');
      }
    }
  }
}

changecss fonksiyonu üç parametre alıyor: stil class’ının ismi, css özellik ismi ve özelliğin değeri. Burada dikkat edilmesi gerekli nokta class tanımlamamız #id_icin_css_class , .css_class veya etiket_icin_css_class şeklindeyse bunları aynen bu şekillerde changecss fonksiyonuna ilk parametre olarak gönderiyoruz; yani başlarında varsa # ve . işaretleriyle birlikte.

Daha sonra sayfanın yüklenmesinin ardından ekran boyutlarını kullanarak stil üzerinde değişiklik yapacak Javascript fonksiyonu yazıp istediğimiz bir yöntem ile sayfaya ekliyoruz; benim bu noktada tavsiyem head etiketi altında bir script etiketiyle eklenmesi, sayfayı düzenlerken direk el altında bulunması açısından kolaylık sağlar. Bu işlemleri body etiketinin onload özelliğine bir fonksiyon altında değil de direk olarak da yazabilirdik ama bu şekilde kullanımı ve müdehale etmesi daha kolay.

function setbackground() {
  var image = "images/back_" + screen.width + "x" + screen.height + ".jpg";
 
  changecss("body", "background-image", "url('" + image + "')");
}

Burada dikkat edilmesi gereken nokta image değişkeni oluşturulurken kullanılacak yöntem. Ben belli başlı ekran çözünürlükleri için bir resim oluşturup bunları back_{genişlik}x{yükseklik}.jpg şeklinde images klasörü altına kopyaladım, o yüzden image değişkenini oluştururken yukarıdaki yöntemi kullandım. Siz kendi belirleyeceğiniz başka şekillerde bunu kullanabilirsiniz, size kalmış. Sadece neyin ne olduğunu iyi bilin yeter

En son olarak body HTML etiketinin onload özelliğine setbackground fonksiyonunu koyuyoruz, böylece işlemlerimiz tamamlanmış oluyor:

Tekrar bir üzerinden geçmek gerekirse sistemimiz şu şekilde işliyor: sayfa yüklendikten sonra setbackground fonsiyonu otomatik olarak çalışarak arkaplan resim dosyasını belirleyip bu dosyayı ilgili css class’ının arkaplan resim özelliğine changecss fonksiyonu aracılığıyla atıyor.

Kullanacaklara kolay gelsin. İyi çalışmalar…

Etiketler: Arkaplan Resmi, Background Picture, CSS, Javascript

 Yazıyı yazdır

 Yazıyı e-posta ile gönder