<div id="div">
        <h2>Background-size : contain</h2>
        <div class="bg01"></div>
        <div class="bg02"></div>
        <div class="bg03 vertical"></div>
        <div class="bg04 vertical"></div>
        <hr>
        <h2>Background-size : cover</h2>
        <div class="bg05"></div>
        <div class="bg06"></div>
        <div class="bg07 vertical"></div>
        <div class="bg08 vertical"></div>
  
</div>
@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic');

/*RESET*/
* { margin: 10px; padding: 0; }
body { font: 17px 'Nanum Gothic', sans-serif; }
a { text-decoration: none; color: #404040; }
li { list-style: none; }
hr { margin: 20px 0; visibility: hidden; }
h2 { clear: both;}

/*BODY*/
#div>div {
    float: left;
    width: 300px;
    height: 150px;
    border: 1px solid #333;
    box-sizing: border-box;
}

#div .vertical {
    width: 150px;
    height: 300px;
}

#div .bg01 {
    background: url(http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile26.uf.tistory.com%2Fimage%2F990F244B5BE8CA7F156FF4) no-repeat center center/contain;
}

#div .bg02 {
    background: url(http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile30.uf.tistory.com%2Fimage%2F9976054B5BE8CA801BCCC1) no-repeat center center/contain;
}

#div .bg03 {
    background: url(http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile26.uf.tistory.com%2Fimage%2F990F244B5BE8CA7F156FF4) no-repeat center center/contain;
}

#div .bg04 {
    background: url(http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile30.uf.tistory.com%2Fimage%2F9976054B5BE8CA801BCCC1) no-repeat center center/contain;
}

#div .bg05 {
    background: url(http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile26.uf.tistory.com%2Fimage%2F990F244B5BE8CA7F156FF4) no-repeat center center/cover;
}

#div .bg06 {
    background: url(http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile30.uf.tistory.com%2Fimage%2F9976054B5BE8CA801BCCC1) no-repeat center center/cover;
}

#div .bg07 {
    background: url(http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile26.uf.tistory.com%2Fimage%2F990F244B5BE8CA7F156FF4) no-repeat center center/cover;
}

#div .bg08 {
    background: url(http://img1.daumcdn.net/thumb/R1920x0/?fname=http%3A%2F%2Fcfile30.uf.tistory.com%2Fimage%2F9976054B5BE8CA801BCCC1) no-repeat center center/cover;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.