background 속성 6 - origin

background-origin 속성은 배경에 이미지가 시작하는 부분을 지정할 수 있다. 

background-clip과 속성값은 같지만, 배경 색상에 적용하는 하는 것이 아니라, 배경이미지의 범위를 지정하는 것이라는 점에서 차이가 있다. 

---

 

속성명	속성값	설명
background-origin	padding-box	기본값, 테두리 안쪽부터 배경이미지 포함
	border-box	테두리에 이미지 포함
	content-box	안쪽여백(padding)안에서부터 배경이미지 포함
	initial	기본값을 따름

 

---

See the Pen LYVQGRL by LimsUIUX (@LimsUIUX) on CodePen.

---

[!!림스유의사항]

 

여기서도 본인의 컴에 img 폴더를 넣고 이미지를 jpg, gif, png 중 하나로 저장하여 배경에 활용하여 본다. 

 

---

 

.origin{
		width:120px;
		height:160px;
		padding:20px;
		border:10px dotted #aa32dc;
		background-image: url('img/1.jpg');
		background-size: contain;
		background-repeat: no-repeat;
	}
	.origin1{
		background-origin:padding-box;/*기본값*/
	}
	.origin2{
		background-origin:border-box;
	}
	.origin3{
		background-origin:content-box;
	}
	.origin4{
		background-origin:initial;
	}
	

---