Footer background image problem

hello.

im having trouble getting the footer background image to display in the correct place.

i want the inner background to overlap the footer background but because of the div’s its displaying below the inner background.

does any one know a good way of doing this?

i tried putting the image in the body and using background-position: left bottom but for some reason it doesn’t work. i looked in some forum and it seems to be an issue with firefox??

any way. here is the code and some pics. if anyone can help it would be great. thanks. MERRY CHRISTMAS.

HOW IT IS:

HOW IT SHOULD BE:

HTML:

<code>
<body>
<div id=“outterBG”> <!-- top grad –>

&lt;div id="innerWrapper"&gt;
    
    &lt;div class="logo"&gt;&lt;/div&gt;
    &lt;div id="header"&gt;
    header
    &lt;/div&gt;&lt;!-- END HEADER --&gt;   		
    
    &lt;!-- START BODY --&gt;
    &lt;div id="mainbody"&gt; 
    
    &lt;div id="bodycont"&gt;
    &lt;div class="bodyTop"&gt;&lt;/div&gt;
     inner bg
    &lt;/div&gt;&lt;!-- END BODY CONT--&gt;
    &lt;div class="bodyBottom"&gt;&lt;/div&gt; 
    &lt;/div&gt;&lt;!-- END MAIN BODY --&gt; 
   
   
    &lt;!-- START FOOTER --&gt; 
    &lt;div id="footer"&gt;
    footer
    &lt;/div&gt;&lt;!-- END FOOTER --&gt;  

&lt;/div&gt; &lt;!-- END INNER WRAPPER --&gt;

<div class=“footerBG”></div>
</div> <!-- END outterBG –>
</body>
</code>

CSS:

<code>
@charset “UTF-8”;
/* CSS Document */

html, body {
background-image: url(‘…/images/wrapper/backgrounds/BGgrad.jpg’);
background-repeat: repeat-x;
background-color: #333;
margin:0px;
padding: 0px;
}

p.clear {
clear:both;
margin: 0;
padding: 0;
}

#outterBG {
width: 100%;
margin:0px;
padding: 0px;
}

#outterBG .footerBG{
background-image: url(‘…/images/wrapper/backgrounds/BGfooter.jpg’);
background-repeat: repeat-x;
background-position: left bottom;
position: absolute;
bottom: 0;
z-index:-1;
height: 90px;
width: 100%;
}

#innerWrapper{
width: 1001px;
margin: 0 auto;
padding: 0px;
clear: both;
}

#innerWrapper .logo{
background-image: url(‘…/images/wrapper/header/logo.jpg’);
background-repeat: no-repeat;
margin-top: 10px;
width: 151px;
height: 34px;
}

#innerWrapper #header {
width: 1001px;
height: 58px;
margin: 10px 0;
background-color: #ccc;
clear: both;
}

#innerWrapper #mainbody {
height: 100%;
}

#mainbody .bodyTop{
background-image: url(‘…/images/wrapper/backgrounds/innerBGtop.jpg’);
background-repeat: no-repeat;
width: 1001px;
height: 7px;
z-index:1;
margin:0px;
padding: 0px;
}
#mainbody .bodyBottom{
background-image: url(‘…/images/wrapper/backgrounds/innerBGbot.jpg’);
background-repeat: no-repeat;
width: 1001px;
height: 7px;
z-index:1;
margin:0px;
padding: 0px;
}

#mainbody #bodycont{
background-color: white;
min-height: 500px;
margin:0px;
padding: 0px;
}

</code>

Well, I’d have to see a live copy to say for sure… specifically all the images involved and a full layout - but what you’ve shown so far is full of problems. Comment placement that could trip IE and FF rendering bugs (YES I SAID COMMENTS), a whole slew of widths that frankly if you have to state exact widths that many times there’s something wrong with the code, even just simple pointless things like saying UTF-8 on a document that inherently can only be ASCII-7 (so pointless) and the fixed width that’s not even 1024 friendly. (much less using a fixed width in the first place – but that’s me)

Do you have this live someplace or could you put it up live so we can see the whole deal with all the separate images? I have the feeling you sliced them up a bit too much and given what you want for text placement you should be nesting (div inside div) instead of sandbagging (empty div before and after).

Of course if that image with the black is supposed to go full width, you might have even bigger layout problems to deal with.

hello.

wow. thanks for all your help.

as you can guess, i’m quite to to all this.
i have watch lots of videos to learn it but i still have alot to learn :slight_smile:

i have uploaded the page so far at http://www.gigsforgrabs.com/test/

i have also uploaded an image of how it show be when its finished at
http://www.gigsforgrabs.com/test/flow/home.html

thanks
ricky

hello,

i removed the footerBG DIV and put the bottom bg image into the outterBG div and it seems to work. :slight_smile:


#outterBG {
background-image: url('../images/wrapper/backgrounds/BGfooter.jpg');
background-repeat: repeat-x;
background-position: bottom;
width: 100%;
margin:0px;
padding: 0px;
}

saying that, you pointed out lots of other things.

are you saying that i should allway design the width to be 1024px ?
i was told before that 997 was a good width to use. i didnt think 1001 would be a problem. guess i was wrong.

also should i only specify the width once. that is in the innerWrapper that holds the site in place.

thanks :slight_smile:

I addressed a lot of your issues in your other thread (the one about the menu) by putting together a quick rewrite.

As to your question here, a good rule of thumb is 32 to 48px should be taken off the desired width for the target size you want to make room for scrollbars and window borders… I like to err on the side of caution and go with the full 48, so for a 1024 friendly layout you should be designing to 976px, not 997. (don’t know who gave you that number, but they’re full of it). At 1001 in 1024 testing here you’ve got a 20px+ slice of the right side not showing.

NOT that I would have been designing for fixed width in the first place, which is part of why the “starting from some goofy PSD” approach to sitebuilding is horrendously flawed. Many of the elements in that design do not lend themselves to fluid width OR fluid height; and fluid heights inside the content area are pretty much a ‘must have’.

As I said in the other thread, you have a “But it works in photoshop” layout – which has little if anything to do with real web development in terms of accessibility, easy to maintain code, and proper practices.

Oh, and while your content area came out to 1001, check your menu – it came out to 1003.