Question

我正在尝试为网站的顶部和底部制作单独的背景图片。经过一些研究后，我发现我需要制作包装并将内容放入其中。我做了这么多，背景正在工作，除了底部的定位。底部背景似乎有一个固定的位置，而不是击中绝对底部。这是我到目前为止的代码，提前感谢你能给我的任何帮助。

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>

Answer 1

尝试使用CSS3 multibackground：

body {
  background: url(/img/backs/bg_t.jpg) no-repeat center top,
  url(/img/backs/bg_b.jpg) no-repeat center bottom; /* second backgrond */
}

Answer 2

抱歉，但是为什么你的包装里面有你的wrapbot，不是更好的只是让那个div低于顶部div的末尾，这可能会解决问题，实际上我通常只是把图像放在最后z-index小于我想要的任何东西。这通常很好用

Answer 3

你需要将wrapbot div放在页面/代码的底部，而不是任何其他div的内部。另外，让你的wrapbot div位置绝对和位置就像你做底部中心重复x

#wraptop {
 width: 1200px;
 height: 100%;
 padding: 0;
 background-image: url(/img/backs/bg_t.jpg);
 position: absolute;
 background-repeat: x;
 background-position: center top;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 z-index:1;
}
#wrapbot {
 width: 1200px;
 height: 100%;
 padding: 0;
 background-image: url(/img/backs/bg_b.jpg);
 position:absolute;
 background-repeat: x;
 background-position: center bottom;
 margin-top: 0;
 margin-right: auto;
 margin-bottom: 0;
 margin-left: auto;
 z-index:1;
}

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>

  <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 id="wrapbot">
</div>
</body>

我甚至不会称他们为破坏者，他们不需要因任何原因而包裹。 div bgtop和bgbottom可能会更好。

如何在网站的顶部和底部制作单独的背景图像？

3 个答案: