თვისება background-image

თვისება background-image აყენებს ელემენტს ფონურ სურათს. ნაგულისხმევად, სურათი დააფარებს მთელ ბლოკს თავისი ასლებით, თუმცა, ამ ქცევის გაუქმება შესაძლებელია თვისების background-repeat დახმარებით.

სინტაქსი

cssსელექტორი {
  background-image: url(სურათის მისამართი);
}

cssსელექტორი {
  background-image: none;
}

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

მნიშვნელობა ნაგულისხმევად: none.

მაგალითი

დავაყენოთ ფონური სურათი background-image-ის დახმარებით, აკრძალოთ მისი გამეორება თვისების background-repeat დახმარებით:

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

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

Результат:

მაგალითი

background-repeat-ის გარეშე ფონური სურათი დააფარებს მთელ ბლოკს:

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

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

Результат:

მაგალითი

შესაძლებელია ერთდროულად დაყენდეს ფონური სურათი და ფონის ფერი background-color-ის დახმარებით. ამ შემთხვევაში, იქ, სადაც არ იქნება ფონის სურათი - იქნება ფონის ფერი:

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

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

Результат:

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