თვისება background-repeat

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

სინტაქსი

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

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

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

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

Результат:

მაგალითი

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

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

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

Результат:

მაგალითი

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

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

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

Результат:

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