当前位置： 文江博客话题详情

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

发布于 2024-10-12 12:22:23 字数 8 浏览 7 评论 0原文

continue

原文

I'm trying to make separate background images for the top and bottom of my site. After doing some research I found that I'll need to make wrappers and place content inside. I've done this much and the backgrounds are working, save for the positioning of the bottom one. The bottom background appears to have a fixed position, rather than hitting the absolute bottom. Here's the code I have so far, thanks in advance for any help you can give me.

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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（3）

波浪屿的海角声 2024-10-19 12:22:23

尝试 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 */
}

Try 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 */
}
回复 原文
走过海棠暮 2024-10-19 12:22:23

抱歉，但是为什么你要把你的包装机器人放在你的包装顶部里面，把这个 div 放在包装顶部 div 的末端下面不是更好吗，这可能会解决问题，事实上我通常只是在末尾放一个带有 z 的图像-索引小于我想要在其顶部的任何内容。这通常效果很好

sorry but why have you got your wrapbot inside your wrap top, isnt it better just to have that div below the end of the wrap top div, this may fix issue, in actual fact i usually just put an image at the end with a z-index of less than anything that i want on the top of it. This works well usually

回复 原文
若言繁花未落 2024-10-19 12:22:23

您需要将wrappbot div 单独放置在页面/代码的底部，而不是放在任何其他div 内。另外，使wrappbot 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>

真的一样，我什至不会称它们为wraptop，它们不需要出于任何原因换行。 div bgtop 和 bgbottom 可能更好。

you need to put the wrapbot div on its own at the bottom of the page/code, not inside of any other divs. also, make that wrapbot div position absolute and position like you did bottom center repeat 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;
}

the html could look like

<!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>

really i wouldnt even call them wraptop, they don't need to wrap for any reason. div bgtop and bgbottom may be better.

回复 原文
~没有更多了~

关于作者

小ぇ时光︴

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

吝吻

文章 0 评论 0

Jasmine

文章 0 评论 0

∞梦里开花

文章 0 评论 0

阳光①夏

文章 0 评论 0

暮念

文章 0 评论 0

梦里泪两行

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文