თვისება background-image

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

სინტაქსი

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

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

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

მნიშვნელობა	აღწერა
`url`	ფაილის მისამართი სურათთან. სურათის სახელი შეიძლება იყოს ორმაგ ბრჭყალებში, ერთმაგ ბრჭყალებში ან საერთოდ ბრჭყალების გარეშე.
`none`	აუქმებს ელემენტის ფონურ სურათს.

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

მაგალითი

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

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

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

მაგალითი

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

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

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

მაგალითი

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

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

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

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

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