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

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

csskichaguli {
  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:

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

css#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:

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

css#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:

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

css#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