Place transparent div-layer above another div-layer with 100% height (with sticky footer!)?

Question

HTML:

<div id="mainWrapper">
    <div id="headerContainer">Header</div>
        <div class="contentPage">
            <div id="content">
                      <p>Content Page</p>
                      <p>Content Page</p>
             </div>
        </div>
    <div id="footerContainer">Footer</div>
</div>

CSS:

body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#mainWrapper {
  margin: 0 auto;
  min-height: 100%;
  position: relative;
  width: 100%;
  background: red;
}

#headerContainer {
  background: none repeat scroll 0 0 #4ED0AA;
  height: auto;
  width: 100%;
}

.contentPage {
  background: url("http://www.sammt.net/Baum.jpg") repeat-y scroll 0 0 / 100% auto rgba(0, 0, 0, 0);
  padding-bottom: 120px;
  width: 100%;
}

#content {
  background: none repeat scroll 0 0 #6288A1;
  opacity: 0.8;
  padding: 20px 20%;
}

#footerContainer {
  background-color: #4ED0AA;
  bottom: 0;
  height: 120px;
  position: absolute;
  width: 100%;
}

Result:

enter image description here

What should happen: The layer with the background-image as well as the layer with the blue transparent background should go until the footer begins. The problem is the sticky footer I think...

Looks like that:

enter image description here

You will need to be more precise about the behaviour you need : 1) does the content always have the same height? 2) if not what happens if the content overflows at the bottom where do you want the scollbar? 3) do the footer and header have fixed heights? — web-tiki, May 24 '14 at 12:38
1) #content has always different heights (this is the main problem). 2) The scrollbar should be in the browser-window, if #content is to height. 3) #footerContainer has fixed heigh as you can see in the css, the header height is not fix defined. — user1711384, May 24 '14 at 15:19

score 2 · Accepted Answer · answered May 25 '14 at 16:01

Here is a demo of the page with just two paragraphs, and another demo with plenty of content to scroll.

I've done a little rearrangement of the layout, so it looks like this now:

<div id="transparent-bg"></div>

<div id="mainWrapper">
    <div id="headerContainer">Header</div>

    <div class="contentPage">

        <div id="content">
            <p>Content Page</p>
            <p>Content Page</p>
        </div>
    </div>
</div>
<div id="footerContainer">
    Footer
</div>

Basically, the background image and the transparent color are being presented in a separate div because it was causing some presentational issues, and the footer has become a sibling after the mainWrapper.

The CSS code is as follows:

html {
    height:100%;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#transparent-bg {
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  margin:auto;
  background: url("http://www.sammt.net/Baum.jpg") no-repeat;
  background-size:cover;
  z-index:-1;
}

#transparent-bg:after {
  background:#6288A1;
  opacity:.8;
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left:0;
  content:'';
}

#mainWrapper {
  margin: 0 auto -120px;
  width: 100%;
  min-height:100%;
  height: auto !important;
}

#headerContainer {
  background: #4ED0AA;
  height: auto;
  width: 100%;
}

.contentPage {  
  width: 100%;
  margin: 0 auto -120px;
}

#content {
  padding: 20px 20% 120px;
  box-sizing: border-box;
}

#footerContainer {
  background-color: #4ED0AA;
  height: 120px;
  width: 100%;
}

I hope this solves your problem!

Thanks van100j for this skilled answer. Your code is working perfectly. My problem is, that I cant change the HTML because of some other dependencies. Everything within .contentPage is completly adaptable, changing the HTML in higher levels is unfortunately not possible :-/ Do you have any idea how to solve it in this way? — user1711384, May 26 '14 at 10:12
You can add the `#transparent-bg` div within the `.contentPage` container [like in this demo](http://jsbin.com/yiqafuzo/4) — van100j, May 26 '14 at 12:33
Sorry for the messy code in my previous comment, you can have a look at the code at http://jsbin.com/yiqafuzo/4/edit — van100j, May 26 '14 at 12:38
Man you saved my day, I was working such a long time at that problem. Thanks a lot! — user1711384, May 26 '14 at 13:48

score 1 · Answer 2 · answered May 26 '14 at 08:39

// text write your css code 

#mainWrapper {
  background: none repeat scroll 0 0 #FF0000;
  height: 1000px;
  margin: 0 auto;
  position: relative;
  width: 100%;
  }
#headerContainer {
   background: none repeat scroll 0 0 #4ED0AA;
   width: 100%;
 }
 .contentPage {
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
 }
 #content {
   background: url("http://www.sammt.net/Baum.jpg") 
   repeat-y scroll 0 0 / 100% auto rgba(0, 0,0,0);
   bottom: 0;
   left: 0;
   opacity: 0.8;
   position: absolute;
   right: 0;
  top: 0;
 }
#footerContainer {
  background-color: #4ED0AA;
  height: 120px;
  width: 100%;
 }

Thanks for your answer, but now you have to scroll if there is only few content. You cant give the mainWrapper a fixed height, because content is always variable. — user1711384, May 26 '14 at 10:05

score 0 · Answer 3 · answered May 19 '14 at 08:47

0

Try to put a background-size:cover in your blue transparent background.

answered May 19 '14 at 08:47

winresh24

687
1
6
27

isnt working. Seems like background-size is only working for images, doesnt it? – user1711384 May 19 '14 at 08:57

AlexPrinceton · Answer 4 · 2014-05-19T11:08:36.483

0

try this code

#content {
  background: none repeat scroll 0 0 #6288A1;
  opacity: 0.8;
  padding: 20px 20%;
  height: 100%;
}

Live Demo

edited May 19 '14 at 11:08

answered May 19 '14 at 08:47

AlexPrinceton

1,173
9
12

This code makes the the layer with the background height (but too height, you have to scroll) and the blue layer still covers only the text in contentPage... – user1711384 May 19 '14 at 08:56
maybe I misunderstood your question and thought on screen that you are missing the fact that I wrote to you, and the property background-size: cover; applied in order to pave Choate selected portion of the image – AlexPrinceton May 19 '14 at 09:04
Just added an image how it should look like – user1711384 May 19 '14 at 09:24
add height: 100%; #container – AlexPrinceton May 19 '14 at 11:06
sorry i mean #content – AlexPrinceton May 19 '14 at 11:16

Place transparent div-layer above another div-layer with 100% height (with sticky footer!)?

4 Answers4