CODEWITHSUNDEEP
htmlcssweb
Matt
Matt

Reputation: 21

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

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>

Upvotes: 2

Views: 2638

Answers (3)

Roman Nazarkin
Roman Nazarkin

Reputation: 2229

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

Upvotes: 1

zonabi
zonabi

Reputation: 746

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.

Upvotes: 0

Daniel Casserly
Daniel Casserly

Reputation: 3500

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

Upvotes: 0

Related Questions