코딩 배우기 - 코딩 첫걸음 - 코딩 기초/CSS

배경 스타일 CSS - background-origin

더불어숲2 2020. 7. 11. 12:43
반응형

배경 스타일 CSS - background-origin

  • background-origin 속성은 배경 이미지를 배치할 기준이 필요할 때 사용합니다.
  • 기본형 : background-origin : border-box / padding-box / content-box



속성 값 설명
border-box 박스 모델의가장 외곽인 테두리가 기준이 됩니다.
podding-box 박스 모델에서 테두리를 뺀 패딩이 기준이 됩니다. (기본 값)
content-box 박스 모델에서 내용 부분이 기준이 됩니다.



background-origin : border-box
background-origin : padding-box
background-origin : content-box

<style>
    .exam1 {
        width: 300px; height: 170px; 
        border: 10px solid #ccc;
        padding: 20px;
        margin-bottom: 10px;
        background-image: url(img/drink.png);
        background-size: 40%;
        background-repeat: no-repeat;
        background-position: left top;
        background-origin: border-box;
    }
    .exam2 {
        width: 300px; height: 170px; 
        border: 10px solid #ccc;
        padding: 20px;
        margin-bottom: 10px;
        background-image: url(img/drink.png);
        background-size: 40%;
        background-repeat: no-repeat;
        background-position: left top;
        background-origin: padding-box;
    }
    .exam3 {
        width: 300px; height: 170px; 
        border: 10px solid #ccc;
        padding: 20px;
        margin-bottom: 10px;
        background-image: url(img/drink.png);
        background-size: 40%;
        background-repeat: no-repeat;
        background-position: left top;
        background-origin: content-box;
    }
</style>



반응형