Question

I’m working on a site, and it’s pretty much done.
I’m trying to have the hills at the bottom of the page, which is currently working. I’m trying to get the footer at the bottom of the hills, but it goes at the bottom of the viewport. I’m using the usual position: absolute; bottom: 0;.
Theses are the main issues. I’d also like for the text to not go over the hills, since it makes it hard to read. The only way I can do this is making the footer bigger, or a filler between the footer and the main test area.
I can get all these working, but only on their own, not all together.
I wont post any specific code, since there’s a lot of it, so if you can help visit http://www.helpusplan.co.uk.
Thanks for any help

Answer 1

I’m fairly certain your problem is that you have your hills image attached to the body of your document. Attach it instead to the footer (I mean, come on, you already named the image footer.png) and place all your footer text in a child div that is positioned relative with respect to the top of the footer div. The height of the footer div should be no smaller than the height of the background image.

Something like:

<div id="footer">
  <!-- hills bg image is attached here by CSS -->
  <div id="footer_content">
     blah blah blah
  </div>
</div>

and

#footer {
  min-height:387px; 
  background: url(image_URL) no-repeat;
}

div#footer_content {
  position:relative;
  top: 100px;
}

Oh, and for heaven’s sake. Do not position: absolute your footer. That’s just nuts.