<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;
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.