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: enter image description here 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?

If the 'vegas' thing is applying the bg image to the body (or html)...you're not going to be able to do this. The footer will always be in one or the other. — Paulie_D, Oct 08 '14 at 15:37
can you provide some HTML? Basicaly you have to place the #footer and #primary-menu-bar outside the container (that will be the only with 960px) and placed them absolute. — Monte, Oct 08 '14 at 15:40

mrksbnch · Accepted Answer · 2014-10-08T16:02:17.627

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.

Maverick · Answer 2 · 2014-10-08T15:50:16.900

0

It's really hard for us to do it like this with out HTML.

So basically what you need to do is place the footer and header outside the container. Because the container is 960px, so the header and footer can go over it.

The structure should be like this:

    <body>
     <header></header>
     <div class="container"></div>
     <footer></footer>
    </body>

Example on codepen

edited Oct 08 '14 at 15:50

answered Oct 08 '14 at 15:43

Maverick

876
2
12
22

score 0 · Answer 3 · answered Oct 08 '14 at 15:45

here is a possible solution: http://jsfiddle.net/09mcoo2h/1/

as i said in the comment below your question: you need to have footer and header outside the container (that is the only with 960px)

To have a footer TO THE BOTTOM of the page, just set the body as position:relative.

HTML

<div id="primary-menu-bar"></div>

<div id="container"></div>

<div id="footer"></div>

CSS

body {
    margin:0;
    padding:0;
    position:relative;
}

#container {
    display:block;
    width:960px;
    height:1600px;
    background:#eee;
    margin:0 auto;
}

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

#primary-menu-bar{
  width: 100%;
  height: 60px;
  top:0;
  background-color: #F00;
  padding-top: 10px;
}

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

3 Answers3