Vetia background-repeat

Vetia background-repeat përcakton mënyrën se si duhet të përsëritet figura e sfondit të elementit. Si parazgjedhje, figura përsëritet përgjatë boshtit X dhe boshtit Y, duke mbuluar kështu tërë zonën e disponueshme.

Sintaksa

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

Vlerat

Vlera	Përshkrimi
`no-repeat`	Figura nuk do të përsëritet fare.
`repeat-x`	Figura do të përsëritet përgjatë boshtit X.
`repeat-y`	Figura do të përsëritet përgjatë boshtit Y.
`repeat`	Figura do të përsëritet përgjatë boshtit X dhe boshtit Y.
`space`	Figura do të përsëritet aq herë sa të mbushë plotësisht zonën, nëse kjo nuk është e mundur, midis figurave shtohet hapësirë e zbrazët.
`round`	Figura do të përsëritet në mënyrë të tillë që në zonë të vendoset një numër i plotë i vizatimeve, nëse kjo nuk është e mundur, atëherë vizatimet e sfondit shkallen.

Vlera e parazgjedhur: repeat - mbulon tërë ekranin me model.

Shembull

Si parazgjedhje, figura e sfondit do të mbulojë tërë elementin:

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

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

Shembull

Le ta bëjmë që figura të mos përsëritet:

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

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

Shembull

Tani le të përsëritet figura përgjatë boshtit X:

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

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

Shembull

Tani përgjatë boshtit Y:

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

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

Shembull

Figurat që përsëriten përgjatë boshteve mund të pozicionohen duke përdorur vetinë background-position:

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

Shembull

Le të shohim se si funksionon vlera space:

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

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

Shembull

Le të shohim se si funksionon vlera round:

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

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

Shihni gjithashtu

vetia background,
e cila paraqet një veti të shkurtuar për sfondin