antalya web tasarım

Css de Çoklu Arka Plan Kullanımı

CSS 3 ile gelen her zaman yapmak istediğim işlemlerden birisidir. Çok arka plan tekniğiyle , arka planda olmasını istediğiniz materyalleri konumlandırabilirsiniz.

Örnek vermek gerekirse ;

Arka planda bir doku ve dokunun üstüne konumlanmasını ve sabit durmasını istediğiniz bir grafik olabilir.

Destekleyen tarayıcılar

Firefox 3.6+
Chrome 2+
Safari 3.1+

IE ve Opera’yı görmemek hayal kırıklığı olabilir fakat bu teknikleri şimdiden öğrenerek geleceğin teknolojisine bir anlamda yatırım yapmaktayız.

Kod kullanım örneğine geçmek gerekirse ;

#multi-bg {
	background: url(images/bg-cake.gif) center center no-repeat,
url(images/bg-diamond.gif) top left repeat;
} /*

İlk olarak bir doku atıyoruz arka plana  "url(images/bg-cake.gif) " ile . Daha sonra dokunun
 üstüne gelecek
bir nesne yerleştiriyoruz . "url(images/bg-diamond.gif)";

 */

/* IE6-8  ' te kullanmak için*/
#multi-bg {
	background: transparent url(images/bg-diamond.gif) repeat top left;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/bg-cake.gif', sizingMethod='crop');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/bg-cake.gif', sizingMethod='crop')";
}