The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Footer hidden when using Full page background image

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #31356

    Hi all,

    I’m finishing up a website that I’ve been working on that combines several techniques I learn here. (Thanks Chris).

    I’m trying to use a sticky footer, which initially worked, but is now hidden after using the technique from this post for a full page background image.

    I’m thinking that it’s a layering issue but haven’t been able to fix it. Any input on how to get the footer to display again?

    Thanks to all.

    Here’s the site:


    I don’t see your footer even if I disable all of your background image styling.


    Hmm, when I disable styles I see it as the last item on every page.

    © 2010-2011 Coral Reef Snorkel Adventures | Captain Ron Gittins | Tel 808-987-1584 | Site design by Jerry Ross Photography & Design


    Ok, looking through your site, there are some things that might help fix things on there.

    1. You have your main-content, main-navigation, and aside all position: absolute;
    This messes with the content display. You also have margin: 0 auto -40px; for your main content. This will make your footer go behind your main-content.

    2. if you float the main-content left and your aside right, you can achieve the same effect as positioning them absolutely with margins.

    3. keep your page-wrap position: relative or your content will push under the background image.

    4. make your footer position: relative and it will appear above the background image.

    Hope this helps.


    Ok, I made the changes indicated above. The only things I have set to position absolute are the #header and #main-navigation divs. I also have a div set the class of clear in the footer to clear the floats of main-content and aside.

    Setting the footer to position: relative brought it out in front of the background image.

    However, it still acts like I’m not clearing the float of the main-content and aside divs.

    Any suggestions?

    Thanks for any and all input.



    That worked perfect. Thanks.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.