배경설정
background:색상 이미지 반복 고정 위치(좌) 위치(상);
background-color:배경색상;
background-image:url(이미지파일명);
background-repeat:반복; (repeat | no-repeat | repeat-x | repeat-y)
background-attachment:고정; (fixed | scroll)
background-position:왼쪽 위쪽; 위치(left center right | top center bottom)
위치는 % 또는 px 로 설정하는 방법을 많이 쓴다.
background-attachment 는 스크롤 되는 상황에서 배경이 같이 스크롤 되게 할지에 대한 설정이다.
background 속성은 배경이 가지는 기본값을 모두 포함하고 있음에 유의한다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-ｅquiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> CSS Boxmodel </title>
<style type="text/css">
body{
background:url(images/bg.gif) repeat-x;
background-attachment:fixed;
}
.box{
width:500px;height:500px;border:1px solid black;
background:orange;
background-color:blue;
background-image:url(images/icon.gif);
background-repeat:no-repeat;
background-position:20% 30px;
}
.box p{border:1px solid red}
</style>
</head>
<body>
<div class="box">
<p>Paragraph Text</p>
<p>Paragraph Text</p>
<p>Paragraph Text</p>
</div>
<div class="box">
<p>Paragraph Text</p>
<p>Paragraph Text</p>
<p>Paragraph Text</p>
</div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-ｅquiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> CSS Boxmodel </title>
<style type="text/css">
body{
background:url(images/bg.gif) repeat-x;
background-attachment:fixed;
}
.box{
width:500px;height:500px;border:1px solid black;
background:orange;
background-color:blue;
background-image:url(images/icon.gif);
background-repeat:no-repeat;
background-position:20% 30px;
}
.box p{border:1px solid red}
</style>
</head>
<body>
<div class="box">
<p>Paragraph Text</p>
<p>Paragraph Text</p>
<p>Paragraph Text</p>
</div>
<div class="box">
<p>Paragraph Text</p>
<p>Paragraph Text</p>
<p>Paragraph Text</p>
</div>
</body>
</html>
'html' 카테고리의 다른 글
| 1월19일 수업 (0) | 2011.01.20 |
|---|---|
| 배경스타일을 이용한 목록의 표현 (0) | 2011.01.16 |
| 박스모델 편집 예제 (0) | 2011.01.16 |
| 박스모델 (0) | 2011.01.16 |
| FONT, TEXT 관련 스타일 예제 (0) | 2011.01.16 |