960px container but full width header/footer up/under the full screen bg image

Question

I'm theming a Drupal website and using the vegas full screen bg. I want to achieve the following: But I have some trouble by theming the footer: I want it to be always displayed under the background image (so you have to scroll down to see the footer) now it keeps coming over the background image. Besides that I want the main menu and footer to become full width and not 960px like the container. But I can't seem to get these 2 to 'break out' the container.

Now I've:

#footer {
    position: absolute;
    bottom:0;
    width: 100%;
    height:100px;
    background-color: #202020;
}

#primary-menu-bar{
  position: absolute;
  width: 100%;
  height: 60px;
  padding: 0;
  margin: 0;
  background-color: rgba(255,255,255,0.70);
  padding-top: 10px;
}

Normally something like this does the trick but I'm struggling to get this right...

Anybody any advice or solutions?

Answer 1

You didn't show any HTML, so I just came up with some HTML myself. If the footer is only visible when you scroll down you need to have some sort of wrapper for both your header and your content element. You can then set the wrapper min-height to 100% and use background-image/background-size for a full-screen image background.

HTML:

<div class="wrapper">
    <header class="page-head" role="banner">
        Header
    </header>
    <main class="main" role="main">
        Content
    </main>
</div>
<footer class="page-foot" role="contentinfo">
    Footer
</footer>

CSS:

html, body {
  height: 100%;
}

.wrapper {
  min-height: 100%;
  background-image: url(http://placehold.it/1200x800);
  background-position: center center;
  background-size: cover;
}

.page-head {
  background: red;
}

.main {
  width: 80%;
  margin: 0 auto;
  background: yellow;
}

.page-foot {
  background: blue;
}

See example on this pen.