堆栈内存溢出
  简体   繁体   English

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

[英]How do I make separate background images at top and bottom of site?

 原文  2011-01-19 16:16:10  4   3    html/ css/ web

问题描述

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

3 个解决方案

解决方案1
 1  2013-03-24 02:30:58

Try CSS3 multibackground: 尝试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 */
}

解决方案2
 0  2013-03-24 01:54:58

you need to put the wrapbot div on its own at the bottom of the page/code, not inside of any other divs. 您需要将wrapbot div独立放置在页面/代码的底部，而不是其他div的内部。 also, make that wrapbot div position absolute and position like you did bottom center repeat x 另外，使该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;
}

the html could look like 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>

really i wouldnt even call them wraptop, they don't need to wrap for any reason. 真的，我什至不称它们为wraptop，因为任何原因，它们都不需要包装。 div bgtop and bgbottom may be better. div bgtop和bgbottom可能更好。

解决方案3
 0  2011-01-19 16:21:15

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. 抱歉，但是为什么要在包装顶部放上wrapbot，最好不要将div放在包装顶部div的末端以下，这可能会解决问题，实际上我通常只将图像放在z的末尾-index小于我想要的任何索引。 This works well usually 通常这很好

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 网站顶部和底部的背景图像是否分开？ - Separate background images at top and bottom of site? 如何使背景图像上方的透明背景颜色显示在底部？ - How do I make a transparent background-color that is on top of a background-image go to bottom? 当网站顶部附近时，如何使页脚“固定”在底部？ - How do I make my footer “stick” to bottom when “near” top of site? 如何使div具有背景图片且没有内容显示并从页面的顶部延伸到底部？ - How do I make my div with a background image and no content show and extend from the top to bottom of the page? 如何制作带有底部信息的 3 张图像 - How do I make an 3 images with bottom information 如何使背景像顶部的SVG一样在顶部？ - How can I make the background on top like the SVG at the bottom? 如何使背景图片上方的链接可点击？ - How can I make links on top of background images clickable? 如何使底部的图像和视频大小相同？ - How do I make the images and the videos at the bottom the same size? 如何组合 3 个背景图像，其中一个被拉伸，两个用于顶部和底部？ - How to combine 3 background images where one is stretched and two are for top and bottom? 如何使文本显示在背景图像的顶部？ - How do I make text appear on top of background image?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM