თვისება background-origin

თვისება background-origin განსაზღვრავს, თუ როგორ განლაგდება ფონური სურათი (ზუსტად სურათი, არა ფონის ფერი) ელემენტთან მიმართებაში: ფონის სურათის ნაწილი შევა საზღვრის ქვეშ, ფონი არ შევა საზღვრის ქვეშ ან ფონი მხოლოდ ელემენტის შიგთავსის ზედათ იქნება განლაგებული (ანუ padding წაიწევს ფონს).

სინტაქსი

სელექტორი {
	background-origin: padding-box | border-box | content-box;
}

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

მნიშვნელობა	აღწერა
`border-box`	ფონური სურათი შევალს საზღვრის ქვეშ.
`padding-box`	ფონური სურათი არ შევალს საზღვრის ქვეშ.
`content-box`	ფონური სურათი იქნება მხოლოდ შიგთავსის ზედათ.

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

შენიშვნები

თვისება background-origin არ მუშაობს, როდესაც background-attachment აქვს მნიშვნელობა fixed. ასევე background-repeat მნიშვნელობით repeat თვისება background-origin ყოველთვის მუშაობს, როგორც მნიშვნელობით border-box.

მაგალითი . ნაგულისხმევი

ნაგულისხმევად ფონი არ შევალს საზღვრის ქვეშ:

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

#elem {
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

მაგალითი . მნიშვნელობა border-box

ახლა ფონი შევალს საზღვრის ქვეშ:

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

#elem {
	background-origin: border-box;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

მაგალითი . მნიშვნელობა content-box

ახლა კი ფონი გადაიწევს padding-ის მეშვეობით:

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

#elem {
	background-origin: content-box;
	background-image: url("bg.png");
	background-repeat: no-repeat;
	border: 10px dashed black;
	padding: 30px;
	width: 250px;
	height: 150px;
}

მაგალითი . background-repeat: repeat-ის დროს

background-repeat მნიშვნელობით repeat თვისება background-origin ყოველთვის მუშაობს, როგორც მნიშვნელობით border-box, ანუ ფონი ყოველთვის შევალს საზღვრის ქვეშ:

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

#elem {
	background-repeat: repeat;
	background-image: url("bg.png");
	border: 10px dashed black;
	padding: 30px;
	width: 350px;
	height: 300px;
}

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

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