Sifa ya background-image

Sifa background-image huweka picha ya msingi kwa kipengele. Kwa chaguo-msingi picha itajaza kopia zake block nzima, hata hivyo, tabia hii inaweza kufutwa kwa kutumia sifa background-repeat.

Syntax

kichaguli {
	background-image: url(kiwango cha picha);
}

kichaguli {
	background-image: none;
}

Thamani

Thamani	Maelezo
`url`	Kiwango cha faili lenye picha. Jina la picha linaweza kuwa kwenye alama za kuquote mara mbili, alama za kuquote moja au hata bila alama za kuquote kabisa.
`none`	Inafuta picha ya msingi kwa kipengele.

Thamani ya chaguo-msingi: none.

Mfano

Tutaweka picha ya msingi kwa kutumia background-image, tukikataza urudiaji wake kwa kutumia sifa background-repeat:

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

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

Mfano

Bila background-repeat picha ya msingi itajaza block nzima:

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

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

Mfano

Inawezekana kuweka picha ya msingi wakati huo huo na kuweka rangi ya msingi kwa kutumia background-color. Katika hali hii, pale ambapo hapatakuwa na picha ya msingi - kutakuwa na rangi ya msingi:

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

Angalia pia

sifa background,
inayowakilisha sifa ya kifupi kwa msingi