我正在尝试为网站的顶部和底部制作单独的背景图片。在做了一些研究之后，我发现我需要制作包装器并将内容放入其中。我已经完成了这么多并且背景正在工作，除了底部的定位。底部背景似乎有一个固定的位置，而不是击中绝对底部。这是我到目前为止的代码，在此先感谢您能给我的任何帮助。
CSS
body {
background-color: #0b0e13;
padding: 0px;
margin: 0px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 12px;
color: #717e8e;
}
.accentbar {
color: #2d3a4a;
}
#header {
height: 200px;
width: 960px;
margin-right: auto;
margin-left: auto;
padding: 0px;
margin-top: 0px;
margin-bottom: 0px;
}
#content {
height: 600px;
width: 960px;
margin-right: auto;
margin-left: auto;
}
#footer {
width: 960px;
margin-top: auto;
margin-right: auto;
margin-left: auto;
text-align: center;
padding: 0px;
margin-bottom: 0px;
}
#footer .text {
color: #5a6470;
}
#headbar {
height: 35px;
width: 960px;
padding: 0px;
margin: 0px;
}
#logo {
background-image: url(/img/logo.jpg);
height: 55px;
background-repeat: no-repeat;
background-position: center bottom;
width: 350px;
margin: 0px;
float: left;
padding-top: 37px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#navbar {
height: 65px;
width: 610px;
float: right;
background-repeat: no-repeat;
padding-top: 35px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#wraptop {
width: 1200px;
height: 100%;
padding: 0;
background-image: url(/img/backs/bg_t.jpg);
background-repeat: no-repeat;
background-position: center top;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#wrapbot {
width: 1200px;
height: 100%;
padding: 0;
background-image: url(/img/backs/bg_b.jpg);
background-repeat: no-repeat;
background-position: center bottom;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
HTML
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Arbiters of Light</title>
<link href="/css/styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<div id="wraptop">
<div id="wrapbot">
<div class="header" id="header">
<div class="headbar" id="headbar">Content for class "headbar" id "headbar" Goes Here</div>
<div id="logo"></div>
<div id="navbar">
<img src="/img/nav/abo.jpg" alt="about" width="82" height="60" hspace="0" border="0" /><img src="/img/nav/cha.jpg" alt="charter" width="86" height="60" hspace="0" border="0" /><img src="/img/nav/com.jpg" alt="community" width="97" height="60" hspace="0" border="0" /><img src="/img/nav/for.jpg" alt="forums" width="81" height="60" border="0" /><img src="/img/nav/gal.jpg" alt="gallery" width="78" height="60" border="0" /><img src="/img/nav/res.jpg" alt="resources" width="106" height="60" border="0" /><img src="/img/nav/app.jpg" alt="apply" width="80" height="60" border="0" />
</div>
</div><!-- end header -->
<div class="content" id="content">
</div><!-- end content -->
<div class="footer" id="footer">
<p>PRIVACY - TERMS OF SERVICE - CONTACT - DISCLAIMER<br /></p>
<p class="text">© 2011 ARBITERS OF LIGHT</p>
</div><!-- end footer -->
</div>
</div>
</body>
最佳答案
试试 CSS3 多背景:
body {
background: url(/img/backs/bg_t.jpg) no-repeat center top,
url(/img/backs/bg_b.jpg) no-repeat center bottom; /* second backgrond */
}
关于html - 如何在网站的顶部和底部制作单独的背景图片？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4737700/