@charset "UTF-8";
/*bg_basic_03.csss*/

#contentBox{width: 800px; height: auto;
	margin: auto;}

#contentBox>div {width: 100%; height: 500px;
	margin-bottom: 2rem; 
	background-image: url(../img/sky2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 70% 82%;
	border: 30px dotted #fa0; box-sizing: border-box;
	background-color: #acf; padding: 40px;}

 .clip_1{background-clip:border-box;}
 /*관계없이 전부 먹음*/
 .clip_2{background-clip:padding-box;}
 /*패딩 포함 들어감*/
 .clip_3{background-clip:content-box;}
 /*패딩 빼고 들어감*/

 .origin_1{background-origin: border-box;}
 .origin_2{background-origin: padding-box;}
 .origin_3{background-origin: content-box;}


/*background-clip - 배경을 어디에 넣을지 정하는 속성
border-box : 테두리 영역과 그 안쪽 영역을 채웁니다.
padding-box : 안쪽 여백 영역과 그 안쪽 영역을 채웁니다.
content-box : 내용 영역과 그 안쪽 영역을 채웁니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
*/



 /*background-origin: 
배경 이미지를 어느 영역부터 채워나갈지를 정하는 속성
 border-box | padding-box | content-box | initial | inherit;
border-box : 테두리 영역 왼쪽 위부터 채웁니다.
padding-box : 안쪽 여백 영역 왼쪽 위부터 채웁니다.
content-box : 내용 영역 왼쪽 위부터 채웁니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
background-origin 속성은 채우기를 시작하는 위치를 정하는 것으로, 
다른 영역을 채우지 않는 것은 아닙니다. 
배경 이미지를 반복시키면 시작점 바깥의 영역도 채웁니다.*/