How do I make separate background images at top and bottom of site?
Question
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>
3 answers
solution1
1 2013-03-24 02:30:58
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 */
}
solution2
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. 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.
solution3
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. This works well usually
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
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?
How do I make my div with a background image and no content show and extend from the top to bottom of the page?
How do I make an 3 images with bottom information
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?
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?
Related Tags