[CSS] ch03-08. bgsize

08_bgsize.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
    @import "../css/08_bgsize.css";
</style>
</head>

<body>
   <div class="bgsize1"></div>
   <div class="bgsize2"></div>
   <div class="bgsize3"></div>
   <div class="bgsize4"></div>
   <div class="bgsize5"></div>   
   <div class="bgsize6"></div>   
</body>
</html>

 

08_bgsize.css

@CHARSET "UTF-8";
div{
    width:600px;
    height:400px;
    background:url(../img/station.jpg) no-repeat;
    border:1px solid black;
    border-radius:10px;
    margin-bottom:20px;
}
.bgsize1{background-size:auto;} /*background-size: 배경사이즈 width, height*/
.bgsize2{background-size:300px;}
.bgsize3{background-size:200px 150px;}
.bgsize4{background-size:45% auto;}/*auto 너비와 같게  */
.bgsize5{background-size:contain;}/*오버플로우 되지 않게*/
.bgsize6{background-size:cover;}/*오버플로우되게*/