728x90
반응형
05_bgposition.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>요안도라</title>
<style>
@import "../css/05_bgposition.css";
</style>
</head>
<body>
<div class="intro" id="bg1"></div>
<div class="intro" id="bg2"></div>
</body>
</html>
05_bgposition.css
@CHARSET "UTF-8";
.intro{ /*CSS에서 중복은 클래스, 유일은 ID로 불러온다.*/
width:500px;
height:300px;
border:1px solid black;
}
#bg1{
background-image:url(../img/bg2.png);
background-repeat:no-repeat;
background-position:0% 0%;
}
#bg2{
background-image:url(../img/bg2.png);
background-repeat:no-repeat;
background-position:30% 60%;/*기준점 왼쪽 맨위, left / top*/
}
body{
background-image:url(../img/bg2.png);
background-repeat:no-repeat;
background-attachment:fixed;/*기본값: scroll 화면크기가 바뀌더라도 화면에 고정*/
background-position:right bottom;/*오른쪽 아래*/
}
728x90
반응형
'WEB > CSS' 카테고리의 다른 글
| [CSS] ch03-07. bgclip (0) | 2017.08.23 |
|---|---|
| [CSS] ch03-06. bg (0) | 2017.08.23 |
| [CSS] ch03-04. bgimg (0) | 2017.08.23 |
| [CSS] ch03-03. bgcolor (0) | 2017.08.23 |
| [CSS] ch03-02. opacity (0) | 2017.08.23 |