Ominaisuus background-repeat

Ominaisuus background-repeat määrittää kuinka elementin taustakuva toistetaan. Oletusarvoisesti kuva toistuu sekä X-akselilla, että Y-akselilla, peittäen siten koko käytettävissä olevan alueen.

Syntaksi

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

Arvot

Arvo	Kuvaus
`no-repeat`	Kuvaa ei toisteta lainkaan.
`repeat-x`	Kuva toistuu X-akselilla.
`repeat-y`	Kuva toistuu Y-akselilla.
`repeat`	Kuva toistuu X-akselilla ja Y-akselilla.
`space`	Kuva toistuu niin monta kertaa, että alue täytetään kokonaan, mikäli tämä ei onnistu, kuvien väliin lisätään tyhjää tilaa.
`round`	Kuva toistuu siten, että alueelle mahtuu kokonaisia kuvia, mikäli tämä ei onnistu, taustakuvat skaalautuvat.

Oletusarvo: repeat - peittää kuvion koko näytön.

Esimerkki

Oletusarvoisesti taustakuva peittää koko elementin:

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

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

Результат:

Esimerkki

Tehdään niin, että kuvaa ei toisteta:

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

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

Результат:

Esimerkki

Ja nyt toistetaan kuvaa X-akselilla:

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

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

Результат:

Esimerkki

Ja nyt Y-akselilla:

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

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

Результат:

Esimerkki

Akselilla toistuvia kuvia voi sijoitella ominaisuuden background-position avulla:

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

Результат:

Esimerkki

Katsotaan kuinka arvo space toimii:

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

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

Результат:

Esimerkki

Katsotaan kuinka arvo round toimii:

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

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

Результат:

Katso myös

ominaisuus background,
joka on taustan lyhennysominaisuus