728x90
반응형
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;}/*오버플로우되게*/
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch03-10. grad (0) | 2017.08.23 |
|---|---|
| [CSS] ch03-09. bgorigin (0) | 2017.08.23 |
| [CSS] ch03-07. bgclip (0) | 2017.08.23 |
| [CSS] ch03-06. bg (0) | 2017.08.23 |
| [CSS] ch03-05. bgposition (0) | 2017.08.23 |