CSS'de background-image Özelliği

Bu özellik ile bir ve ya birden fazla arkaplan görseli ayarlanabilir.

Varsayılan olarak, bir arkaplan resmi sol üst köşeden başlayıp kendisini genişlik ve yükseklik kadar tekrar eder.

Yapısı (Syntax)background-image: url | none | initial | inherit;

JavaScript Yapısı	object.style.backgroundImage="url('test.jpg')"
Animasyon Özellikleri Uygulanabilir	Hayır (Daha fazla detay)

Değerler

Örnekler

En basitinden bir görsel belirleyerek başlayalım.

.box {
	background-image: url(../img/test.jpg);
	background-repeat: no-repeat;
	background-position: center;
}

Birden fazla görsel belirlemek istersek;

.box {
	background-image: url(img/logo.png), url(img/bg.png);
	background-repeat: no-repeat, repeat;
}

Gradientlere örnek vermek gerekirse;

.box {
	background-image: linear-gradient(red, yellow, blue);
}

.box2 {
	background-image: radial-gradient(red, yellow);
}