Savybė background-repeat

Savybė background-repeat nustato kaip kartoti elemento fono paveikslėlį. Pagal nutylėjimą paveikslėlis kartojamas ir X ašyje, ir Y ašyje, tokiu būdu padengdamas visą prieinamą plotą.

Sintaksė

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

Reikšmės

Reikšmė	Aprašas
`no-repeat`	Paveikslėlis visai nekartosis.
`repeat-x`	Paveikslėlis kartosis X ašyje.
`repeat-y`	Paveikslėlis kartosis Y ašyje.
`repeat`	Paveikslėlis kartosis X ašyje ir Y ašyje.
`space`	Paveikslėlis kartosis tiek kartų, kiek reikia visiškai užpildyti plotą, jei tai nepavyksta, tarp paveikslėlių pridedama tuščia erdvė.
`round`	Paveikslėlis kartosis taip, kad plote tilptų sveikas skaičius piešinių, jei to padaryti nepavyksta, tai fono piešiniai yra masteliuojami.

Numatytoji reikšmė: repeat - padengia visą ekraną raštu.

Pavyzdys

Pagal nutylėjimą fono paveikslėlis išklos visą elementą:

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

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

Результат:

Pavyzdys

Padarykime, kad paveikslėlis nekartotųsi:

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

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

Результат:

Pavyzdys

Dabar tegul paveikslėlis kartojasi X ašyje:

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

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

Результат:

Pavyzdys

Dabar Y ašyje:

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

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

Результат:

Pavyzdys

Pasikartojančius ašyse paveikslėlius galima pozicionuoti naudojant savybę 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;
}

Результат:

Pavyzdys

Pažiūrėkime, kaip veikia reikšmė space:

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

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

Результат:

Pavyzdys

Pažiūrėkime, kaip veikia reikšmė round:

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

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

Результат:

Taip pat žiūrėkite

savybė background,
kuri yra sutrumpinta fonui skirta savybė