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 Tıklayınca büyüyen fotoğraf / lightbox başlıklı makalemizde lightbox, lightbox resimli anlatım ve responsive light box hakkında bilgiler verilmektedir.

Bir cevap yazın

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