background-image Özelliği

background-image özelliği, bir elemana arka plan resmi belirler. Varsayılan olarak resim, kopyalarıyla tüm bloğu kaplayacak şekilde tekrarlanır, ancak bu davranış background-repeat özelliği kullanılarak iptal edilebilir.

Sözdizimi

seçici {
	background-image: url(resmin yolu);
}

seçici {
	background-image: none;
}

Değerler

Değer	Açıklama
`url`	Resim dosyasının yolu. Resmin adı çift tırnak içinde, tek tırnak içinde veya hiç tırnak olmadan yazılabilir.
`none`	Eleman için arka plan resmini iptal eder.

Varsayılan değer: none.

Örnek

background-image ile bir arka plan resmi belirleyelim ve background-repeat özelliği ile tekrarını yasaklayalım:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Örnek

background-repeat olmadan arka plan resmi tüm bloğu kaplayacak şekilde tekrarlanır:

<div id="elem"></div>

#elem {
	background-image: url("bg.png");
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Örnek

Aynı anda hem arka plan resmi belirlenebilir hem de background-color kullanılarak arka plan rengi belirlenebilir. Bu durumda, arka plan resminin olmadığı yerlerde arka plan rengi görünecektir:

<div id="elem"></div>

#elem {
	background-color: orange;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	width: 400px;
	height: 300px;
	border: 3px solid black;
}

Ayrıca Bakınız

background özelliği,
arka plan için kısa yazım özelliğidir