Sifa ya background-repeat

Sifa background-repeat inabainisha jinsi ya kurudia picha ya usuli wa kipengele. Kwa chaguo-msingi picha hurudiwa kwenye mhimili X, na mhimili Y, na hivyo kufunika eneo lote linalopatikana.

Kisarufi

csskichagua {
  background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

Thamani

Thamani	Maelezo
`no-repeat`	Picha haitarudiwi kabisa.
`repeat-x`	Picha itarudiwa kwenye mhimili X.
`repeat-y`	Picha itarudiwa kwenye mhimili Y.
`repeat`	Picha itarudiwa kwenye mhimili X na kwenye mhimili Y.
`space`	Picha itarudiwa mara nyingi, ili kujaza eneo kabisa, kama hali hii haifiki, nafasi tupu huongezwa kati ya picha.
`round`	Picha itarudiwa kwa namna ambayo nambari kamili ya michoro inaweza kutoshea kwenye eneo, kama hali hii haifiki, basi michoro ya usuli inabadilishwa kiwango.

Thamani ya chaguo-msingi: repeat - hufunika skimu nzima ya skrini.

Mfano

Kwa chaguo-msingi picha ya usuli itajaza kipengele kizima:

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

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

Результат:

Mfano

Wacha tufanye ili picha isirudiwe:

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

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

Результат:

Mfano

Sasa picha irudiwe kwenye mhimili X:

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

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

Результат:

Mfano

Sasa kwenye mhimili Y:

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

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

Результат:

Mfano

Picha zinazorudiwa kwenye axes zinaweza kuwekwa mahali kwa kutumia sifa background-position:

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

css#elem {
  background-repeat: repeat-y;
  background-position: top center;
  background-image: url("bg.png");
  width: 400px;
  height: 300px;
  border: 1px solid black;
}

Результат:

Mfano

Tutaangalia jinsi thamani space inavyofanya kazi:

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

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

Результат:

Mfano

Tutaangalia jinsi thamani round inavyofanya kazi:

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

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

Результат:

Angalia pia

sifa background,
inayowakilisha sifa iliyofupishwa kwa usuli