Īpašība background-repeat

Īpašība background-repeat nosaka, kā atkārtot elementa fona attēlu. Pēc noklusējuma attēls atkārtojas gan pa X asi, gan pa Y asi, tādējādi pārklājot visu pieejamo laukumu.

Sintakse

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

Vērtības

Vērtība	Apraksts
`no-repeat`	Attēls vispār neatkārtosies.
`repeat-x`	Attēls atkārtosies pa X asi.
`repeat-y`	Attēls atkārtosies pa Y asi.
`repeat`	Attēls atkārtosies pa X asi un pa Y asi.
`space`	Attēls atkārtosies tik reižu, lai pilnībā aizpildītu laukumu, ja tas neizdodas, starp attēliem tiek pievienota tukša vieta.
`round`	Attēls atkārtosies tā, lai laukumā ietilptu vesels attēlu skaits, ja to nevar izdarīt, tad fona attēli tiek mērogoti.

Noklusējuma vērtība: repeat - pārklāj visu ekrānu ar rakstu.

Piemērs

Pēc noklusējuma fona attēls izklāsies visā elementā:

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

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

Результат:

Piemērs

Padarīsim, lai attēls neatkārtotos:

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

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

Результат:

Piemērs

Tagad ļausim attēlam atkārtoties pa X asi:

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

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

Результат:

Piemērs

Un tagad pa Y asi:

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

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

Результат:

Piemērs

Atkārtotos attēlus pa asīm var pozicionēt ar īpašības background-position palīdzību:

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

Результат:

Piemērs

Apskatīsim, kā darbojas vērtība space:

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

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

Результат:

Piemērs

Apskatīsim, kā darbojas vērtība round:

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

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

Результат:

Skatiet arī

īpašība background,
kas ir saīsinājuma īpašība fonam