CSS / background-size 배경 크기 설정

<style type="text/css">
    .bs_box {
        background: url(https://blog.kakaocdn.net/dn/bGylEu/btrUQal5KEW/YgwfnrqfK98xEI6njdxHQ1/img.png);
        width: 100%;
        padding: 24px;
        border: 2px solid #333;
        color: #fff;
        margin-bottom: 15px;
    }

    .bs_a {
        background-size: auto;
    }

    .bs_ct {
        background-size: contain;
    }
    .bs_ct2 {
        background-size: contain;
        padding: 77px;
    }

    .bs_c {
        background-size: cover;
    }

    .bs_n {
        background-size: 50px;
    }
    .bs_n2 {
        background-size: 55% 55%;
    }

    .bs_cc {
        background: url(https://blog.kakaocdn.net/dn/0qgT8/btrUHNNpRdO/2k227KseOgrQc8quO4hswK/img.png), url(https://blog.kakaocdn.net/dn/bGylEu/btrUQal5KEW/YgwfnrqfK98xEI6njdxHQ1/img.png);
        background-size: contain, cover;
    }
</style>

<h2>background-size</h2>
<p>배경 이미지 크기 조절</p>
<div class="bs_a bs_box">
    <h3>background-size: auto;</h3>
    <p>기본값</p>
    <p>원본 크기 그대로</p>
    <p>콘텐츠 공간에 맞게 이미지가 잘림</p>
</div>

<div class="bs_ct bs_box">
    <h3>background-size: contain;</h3>
    <p>가로, 세로 비율 유지하며 이미지 다 보임</p>
    <p>콘텐츠 공간에 맞게 이미지가 늘어나거나 줄어듬</p>
</div>
<div class="bs_ct2 bs_box">
    <h3>background-size: contain;</h3>
    <p>가로, 세로 비율 유지하며 이미지 다 보임</p>
    <p>콘텐츠 공간에 맞게 이미지가 늘어나거나 줄어듬</p>
    <p>이미지 해상도 손실</p>
</div>

<div class="bs_c bs_box">
    <h3>background-size: cover;</h3>
    <p>콘텐츠 크기에 맞게 덮음</p>
</div>

<div class="bs_n bs_box">
    <h3>background-size: 수치(px, %...);</h3>
    <p>수치 n; : 가로, 세로 크기 동일</p>
</div>
<div class="bs_n2 bs_box">
    <h3>background-size: 수치(px, %...);</h3>
    <p>수치 n n; : 앞 숫자 가로, 뒷 숫자 세로</p>
</div>

<div class="bs_cc bs_box">
    <h3>background-size: contain, cover;</h3>
    <p>두가지 속성 적용 가능</p>
</div>

 

See the Pen background-size by nilgi (@nilgi) on CodePen.

 

 

background-size: auto; // 이미지 원본 크기를 유지하며 콘텐츠 크기에 맞게 이미지가 잘리기도 한다.

background-size: contain; // 이미지 가, 세로 비율을 유지하며 모두 보인다.

background-size: cover; // 콘텐츠 크기에 맞게 덮는다.

background-size: 수치; // 가로 세로 크기 동일

background-size: 수치 수치; // 앞 가로. 뒤 세로

background-size: 속성, 속성: // 두가지 속성 조합 가능