harun güngör

Öncelikle şunu söyledi; CSS dinamik arkaplan resmi özelliği versiyon 3 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. Kendisi bu örnekte belli başlı ekran çözünürlükleri için ayrı ayrı kaydedilmiş resimleri kullandı fakat PHP gibi diller kullanarak sunucu tarafında resim dinamik olarak da boyutlandırılabilir. Oluşturduğu 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; kendisinin bu noktada tavsiyesi 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…