თვისება background-repeat

თვისება background-repeat ადგენს, როგორ გაიმეოროს ელემენტის ფონური სურათი. ნაგულისხმევად, სურათი მეორდება როგორც X ღერძის, ისე Y ღერძის მიმართულებით, ამით დაფარავს მთელ ხელმისაწვდომ ფართობს.

სინტაქსი

სელექტორი {
	background-repeat: no-repeat | repeat | repeat-x | repeat-y | space | round;
}

მნიშვნელობები

მნიშვნელობა	აღწერა
`no-repeat`	სურათი საერთოდ არ განმეორდება.
`repeat-x`	სურათი განმეორდება X ღერძის მიმართულებით.
`repeat-y`	სურათი განმეორდება Y ღერძის მიმართულებით.
`repeat`	სურათი განმეორდება როგორც X, ისე Y ღერძის მიმართულებით.
`space`	სურათი იმდენჯერ განმეორდება, რომ სრულად შეავსოს ფართობი, თუ ეს ვერ მოხერხდა, სურათებს შორის ემატება ცარიელი სივრცე.
`round`	სურათი ისე განმეორდება, რომ ფართობში მთელი რიცხვის ოდენობის ნახატი მოთავსდეს, თუ ამის გაკეთება ვერ მოხერხდა, ფონური ნახატები მასშტაბირდება.

ნაგულისხმევი მნიშვნელობა: repeat - ფარავს ორნამენტით მთელ ეკრანს.

მაგალითი

ნაგულისხმევად, ფონური სურათი მოაფარებს თავის თავს მთელ ელემენტს:

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

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

მაგალითი

მოდით, გავაკეთოთ ისე, რომ სურათი არ განმეორდეს:

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

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

მაგალითი

ახლა კი დავუშვათ, სურათი განმეორდეს X ღერძის მიმართულებით:

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

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

მაგალითი

ახლა კი Y ღერძის მიმართულებით:

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

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

მაგალითი

ღერძების მიმართულებით განმეორებადი სურათების პოზიციონირება შესაძლებელია თვისების 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;
}

მაგალითი

ვნახოთ, როგორ მუშაობს მნიშვნელობა space:

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

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

მაგალითი

ვნახოთ, როგორ მუშაობს მნიშვნელობა round:

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

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

იხილეთ აგრეთვე

თვისება background,
რომელიც წარმოადგენს შემოკლებულ თვისებას ფონისთვის