background-origin 속성

background-origin

배경 이미지를 위치를 지정할 기준점을 지정해주는 속성

 

 

background-origin :  border-box

박스 모델의 테두리를 기준

.bg {
    background: url("../img/bike.jpg");
    color: transparent;
    border: 10px dashed #000;
    padding: 30px;
    font-size: 50px;
    font-weight: 600;
    background-origin: border-box;
    background-repeat: no-repeat;
}

 

 

 

background-origin :  padding-box

박스 모델의 테두리를 뺀 패딩 시작 지점이 기준

.bg {
    background: url("../img/bike.jpg");
    color: transparent;
    border: 10px dashed #000;
    padding: 30px;
    font-size: 50px;
    font-weight: 600;
    background-origin: padding-box;
    background-repeat: no-repeat;
}

 

 

 

 

background-origin : content-box

박스 모델에서 컨텐츠 부분이 기준

.bg {
    background: url("../img/bike.jpg");
    color: transparent;
    border: 10px dashed #000;
    padding: 30px;
    font-size: 50px;
    font-weight: 600;
    background-origin: content-box;
    background-repeat: no-repeat;
}

컨텐츠 영역부터 bg를 위치

 

 

호환성 보기