Last html and css file download.
(최종 파일 다운받기)

1. psd is like this.
(psd 파일 모습)
index

2. Html structure. There will be more div tag later for navigation, content, footer etc. But just for making BG, this is main structure.
(html 구조. 차후에 메뉴,내용,푸터를 위한 div 태그가 더 추가되지만. BG를 만들기 위해서의 기본 구조는 아래와 같다.)
html_structure

3. And this is source code
(소스 코드는 아래와 같다)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!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="en" lang="en">
<head> 
<title>BG</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
 
<body>
<div id="top-bg">
    <div id="wrap">
 
    	<div id="top-nav-bar">
           </br></br></br></br> --::Navigation::--  </br></br></br></br></br>    	
        </div>	
 
        <div id="content">
        	--::Contents::--</br></br>
		</div> <!-- Close Content -->
 
	</div> <!-- Close wrap -->
 
	<!-- Footer BG -->
 
    <div id="wrap-bottom-tile"></div>
    <div class="bottom-bg"></div>
</div> <!-- Close top-bg -->
</body>
</html>

4. There are 5 BG images. This is the overview.
(5개 배경 이미지들의 개략)
bg

5. With image
(이미지와 함께 보면)
bg_i

6. css
css

7. css code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

@charset "utf-8";
/* CSS Document */
 
html,body,div,span,img,h1,h2,h3,h3,h4,h6,p,a,abbr,em,font,strong,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;background:transparent;}
 
 
#content {	
	height: 1200px;	
	background-color: #FCFCFC;
}
 
#wrap {
	margin:0 auto;
	width:982px;
	position:relative;
}
 
html {
	background-color:#79c4c5;
	background-image:url(images/bg1_tile.jpg);
	background-repeat:repeat;	
	background-position:left top;
}
 
body {
	background-image:url(images/bg2_top_tile.jpg);
	background-repeat:repeat-x;
	background-position:left top;	
	font-family: sans-serif;	
	font-size:12px;
}
 
#top-bg {
	background-image:url(images/bg3_top.jpg);
	background-repeat:no-repeat;
	background-position:center top;
}
 
#wrap-bottom-tile {
	background-image:url(images/bg4_bottom_tile.png);
	background-repeat:repeat-x;
	background-position:left bottom;
	height:640px;
	margin-top:-400px;
	z-index:100;		
}
 
.bottom-bg {
	background-image:url(images/bg5_bottom.png);
	background-repeat:no-repeat;
	background-position:center bottom;
	height:230px;
	margin-top:-230px;	
}