Egenskapen background-repeat

Egenskapen background-repeat anger hur en bakgrundsbild för ett element ska upprepas. Som standard upprepas bilden både längs X-axeln och Y-axeln, och täcker på så sätt hela tillgängligt område.

Syntax

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

Värden

Värde	Beskrivning
`no-repeat`	Bilden kommer inte att upprepas alls.
`repeat-x`	Bilden kommer att upprepas längs X-axeln.
`repeat-y`	Bilden kommer att upprepas längs Y-axeln.
`repeat`	Bilden kommer att upprepas längs både X-axeln och Y-axeln.
`space`	Bilden upprepas så många gånger att den fyller området helt, om detta inte går att uppnå läggs tomt utrymme till mellan bilderna.
`round`	Bilden upprepas så att ett helt antal bilder får plats i området, om detta inte går att uppnå skalas bakgrundsbilderna.

Standardvärde: repeat - täcker hela området med mönstret.

Exempel

Som standard kommer bakgrundsbilden att täcka hela elementet:

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

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

Результат:

Exempel

Låt oss göra så att bilden inte upprepas:

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

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

Результат:

Exempel

Och nu låt oss att bilden upprepas längs X-axeln:

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

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

Результат:

Exempel

Och nu längs Y-axeln:

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

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

Результат:

Exempel

Bilder som upprepas längs axlarna kan positioneras med hjälp av egenskapen 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;
}

Результат:

Exempel

Låt oss se hur värdet space fungerar:

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

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

Результат:

Exempel

Låt oss se hur värdet round fungerar:

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

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

Результат:

Se även

egenskapen background,
som är en sammanfattande egenskap för bakgrund