如何在网站的顶部和底部制作单独的背景图像？
[英]How do I make separate background images at top and bottom of site?
问题描述
我正在尝试为网站的顶部和底部制作单独的背景图像。 经过研究后，我发现我需要做包装并将内容放入其中。 我已经做了很多，背景工作正常，除了最下面的位置。 底部背景似乎具有固定位置，而不是达到绝对底部。 这是我到目前为止的代码，在此先感谢您能为我提供的任何帮助。
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>
3 个解决方案
解决方案1
1 2013-03-24 02:30:58
尝试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
您需要将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>
真的，我什至不称它们为wraptop，因为任何原因，它们都不需要包装。 div bgtop和bgbottom可能更好。
解决方案3
0 2011-01-19 16:21:15
抱歉，但是为什么要在包装顶部放上wrapbot，最好不要将div放在包装顶部div的末端以下，这可能会解决问题，实际上我通常只将图像放在z的末尾-index小于我想要的任何索引。 通常这很好
如何使背景图像上方的透明背景颜色显示在底部？
[英]How do I make a transparent background-color that is on top of a background-image go to bottom?
如何使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 to combine 3 background images where one is stretched and two are for top and bottom?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.