A background-repeat tulajdonság

A background-repeat tulajdonság határozza meg, hogyan ismétlődjön egy elem háttérképe. Alapértelmezetten a kép mind az X, mind az Y tengely mentén ismétlődik, így lefedve a teljes elérhető területet.

Szintaxis

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

Értékek

Érték	Leírás
`no-repeat`	A kép egyáltalán nem ismétlődik.
`repeat-x`	A kép az X tengely mentén ismétlődik.
`repeat-y`	A kép az Y tengely mentén ismétlődik.
`repeat`	A kép az X és az Y tengely mentén ismétlődik.
`space`	A kép annyiszor ismétlődik, hogy teljesen kitöltse a területet, ha ez nem lehetséges, üres hely kerül a képek közé.
`round`	A kép úgy ismétlődik, hogy egész számú képfitsen a területre, ha ez nem érhető el, a háttérképek méretezve lesznek.

Alapértelmezett érték: repeat - mintázattal fedi le a teljes területet.

Példa

Alapértelmezetten a háttérkép kitölti a teljes elemet:

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

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

Результат:

Példa

Állítsuk be, hogy a kép ne ismétlődjön:

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

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

Результат:

Példa

Most ismétlődjön a kép az X tengely mentén:

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

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

Результат:

Példa

És most az Y tengely mentén:

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

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

Результат:

Példa

A tengelyek mentén ismétlődő képek pozicionálhatóak a background-position tulajdonsággal:

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

Результат:

Példa

Nézzük meg, hogyan működik a space érték:

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

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

Результат:

Példa

Nézzük meg, hogyan működik a round érték:

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

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

Результат:

Lásd még

a background tulajdonság,
ami a háttérre vonatkozó összetett tulajdonság