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 հատկությունը,
որը ֆոնի համար կրճատ հատկություն է