Multiple backgrounds CSS3 | Web bulutu

Multiple backgrounds CSS3

css3-multiple-backgrounds

Css3 ile gelen multiple background özelliği sayesinde, aynı elemente birden fazla arka plan görüntüleri eklenebiliyor.

Kullanımı da oldukça basit. Yapmanız gereken sadece css değerlerini “,” ile birbirinden ayırmak.

Aşağıda tek bir background özelliği tanımlanmış kutu id’sine sahip bir div görüyorsunuz.

#kutu{
	width:500px;
	height:300px;
	background-image:url(1.png);
	background-repeat:no-repeat;
	background-position:top left;
	background-size:100px 100px;
	}

Gelelim birden fazla background kullanmaya;

#kutu{
	width:500px;
	height:300px;
	background-image:url(1.png), url(2.png) ;
	background-repeat:no-repeat, no-repeat;
	background-position:top left, bottom right;
	background-size:100px 100px, 50px 50px;
	}
}

Bir başka blog yazımda görüşmek üzere 🙂

Bir önceki yazımız olan Responsive layout (Div Düzeni) Bölüm-1 başlıklı makalemizi de okumanızı öneririz.


Bir cevap yazın

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