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

szelektor {
	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:

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

#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:

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

#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:

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

#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:

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

#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:

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

#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:

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

#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:

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

#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