Egenskaben background-repeat

Egenskaben background-repeat angiver hvordan baggrundsbilledet for et element skal gentages. Som standard gentages billedet både langs X-aksen og Y-aksen, og dækker dermed hele det tilgængelige område.

Syntaks

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

Værdier

Værdi	Beskrivelse
`no-repeat`	Billedet gentages slet ikke.
`repeat-x`	Billedet gentages langs X-aksen.
`repeat-y`	Billedet gentages langs Y-aksen.
`repeat`	Billedet gentages langs både X-aksen og Y-aksen.
`space`	Billedet gentages så mange gange, at det fylder området helt, hvis det ikke lykkes, tilføjes tomt mellemrum mellem billederne.
`round`	Billedet gentages, så der passer et helt antal billeder i området, hvis det ikke kan lade sig gøre, skaleres baggrundsbillederne.

Standardværdi: repeat - dækker hele området med mønsteret.

Eksempel

Som standard vil baggrundsbilledet dække hele elementet:

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

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

Результат:

Eksempel

Lad os gøre så billedet ikke gentages:

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

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

Результат:

Eksempel

Og nu lad billedet gentage sig langs X-aksen:

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

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

Результат:

Eksempel

Og nu langs Y-aksen:

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

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

Результат:

Eksempel

Billeder der gentages langs akserne kan positioneres med egenskaben 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;
}

Результат:

Eksempel

Lad os se hvordan værdien space fungerer:

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

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

Результат:

Eksempel

Lad os se hvordan værdien round fungerer:

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

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

Результат:

Se også

egenskaben background,
som er en sammentrækningsegenskab for baggrunden