Not sure how to make background and footer work together

[goneahead]

Hi,

Sorry, I'm here - again. I've finally gotten my latest layout close to what I want, but I can't get the footer (I am using canvas for the footer) and background image (I am using body for the repeating image) to mesh correctly. If you scroll to the bottom, you will see what I mean.

I think I got the footer positioned right, but I need to add a margin to the bottom of my repeating background image? I can't seem to find the right coding that will let me do that. Any help would be appreciated!

Comments

[facetofcathy]

Okay that was fun. I've never played around with that kind of background image before and images are sort of my current obsession.

So, I changed a bunch of stuff, and I think it looks correct, but test this--I only looked at it in Firefox very briefly.

First, what you asked for you can only get with a time machine! There is a CSS3 property that lets you set a background image offset from the bottom right, but it's only supported in Opera so far.

So, I took your main image off of #body and put it on the div.inner inside #canvas. By doing this, canvas can be longer than the element containing the other background image naturally since it's a parent. I had to tweak your sizes to get it all to line up.

Then I found another problem, your code had some legacy code on #header from the originating style that put padding on it in ems. That fluid measure gets bigger as you change font sizes, so as soon as that happens the header is too tall for the image and black lines show up. You need to get rid of that code altogether.

I took a left-over bit of positioning code out and corrected a typo with the color on body too.

Here's the altered code:

body {	
  font-family:Arial, Helvetica, sans-serif;
  background:#000000;
  font-size:0.8em;
  color:#000000;
  font-weight:normal;
  margin:0;
  }

Completely remove the #header, #footer section, you're not displaying the #footer and the #header styles are all below

#header {
  position:absolute;
  top:20;
  left:0;
  background:#0D1A21 url(http://i1060.photobucket.com/albums/t442/thimblesandforks/Headers%20and%20Footers/bk_header.png) no-repeat top left;
  height:120px;
  width:100%; 
  padding: 0;
  }

#canvas {
  background-image: url("http://i1060.photobucket.com/albums/t442/thimblesandforks/Headers%20and%20Footers/bk_footer.png");
  background-position: 0% 100%;
  background-repeat: no-repeat;
  padding-bottom: 119px;
  margin-bottom: 1px;
  }

#canvas > .inner {
  background-image: url(http://i1060.photobucket.com/albums/t442/thimblesandforks/Headers%20and%20Footers/bk_content_wrap.png);
  background-repeat: repeat-y; 
  padding-bottom:150px; 
  }

I'm not sure about the padding on the last thing as I don't know how you want the very bottom to look spacing-wise. Hope this helps.

[goneahead]

wow! thank you so, so much! that's exactly what I needed!

you rock!!!!