Хусусияти background-image

Хусусияти background-image тасми фонииро ба унсур таъин мекунад. Бо тарзи пешфарз тасмир бо нусхаҳои худ тамоми блокро пӯшонад, аммо ин рафторро бо ёрии хусусияти background-repeat бекор кардан мумкин аст.

Синтаксис

интихобкунанда {
	background-image: url(роҳ ба тасмир);
}

интихобкунанда {
	background-image: none;
}

Қиматҳо

Қимат	Тавсиф
`url`	Роҳ ба файли тасмир. Номи тасмир метавонад дар қошуқҳои дукабата, яккабата ва умуман бе қошуқҳо бошад.
`none`	Тасми фониро барои унсур бекор мекунад.

Қимати пешфарз: none.

Намуна

Тасми фониро бо ёрии background-image таъин мекунем, такроршавии онро бо ёрии хусусияти background-repeat манъ мекунем:

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

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

Намуна

Бе background-repeat тасми фонӣ тамоми блокро бо худ пӯшонад:

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

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

Намуна

Ҳамзамон метавон тасми фониро таъин кард ва ранги фонӣ таъин кард бо ёрии background-color. Дар ин ҳолат дар он ҷо, ки тасми фонӣ набошад, ранги фонӣ хоҳад буд:

<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;
}

Ҳамчунин бубинед

хусусияти background,
ки хусусияти кӯтоҳшуда барои фон аст