Vetia background-origin

Vetia background-origin përcakton mënyrën se si figura e sfondit (posaçërisht figura, jo mbushja) do të vendoset në lidhje me elementin: një pjesë e figurës së sfondit do të zgjasë nën kufirin, sfondi nuk do të zgjasë nën kufirin ose sfondi do të vendoset vetëm mbi përmbajtjen e elementit (domethënë padding do ta largojë sfondin).

Sintaksa

përzgjedhësi {
	background-origin: padding-box | border-box | content-box;
}

Vlerat

Vlera	Përshkrimi
`border-box`	Figura e sfondit do të zgjasë nën kufirin.
`padding-box`	Figura e sfondit nuk do të zgjasë nën kufirin.
`content-box`	Figura e sfondit do të jetë vetëm mbi përmbajtjen.

Vlera e paracaktuar: padding-box.

Vërejtje

Vetia background-origin nuk funksionon, kur background-attachment ka vlerën fixed. Gjithashtu me background-repeat në vlerën repeat vetia background-origin gjithmonë funksionon, si me vlerën border-box.

Shembull . Parazgjedhur

Parazgjedhur, sfondi nuk do të kalojë nën kufirin:

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

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

Shembull . Vlera border-box

Tani sfondi do të kalojë nën kufirin:

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

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

Shembull . Vlera content-box

Tani sfondi do të largohet nga 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;
}

Shembull . Me background-repeat: repeat

Me background-repeat në vlerën repeat vetia background-origin gjithmonë funksionon, si me vlerën border-box, domethënë sfondi gjithmonë kalon nën kufirin:

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

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

Shihni gjithashtu

vetia background-clip,
e cila përcakton pozicionin e figurës së sfondit dhe të mbushjes
vetia background,
e cila paraqet një veti-shkurtim për sfondin