How can I make my wrapper 100% height?

Question

I currently have a wrapper on my website, which you can see on this page here: http://moviora.com/movie/977

That does not work as it should. I wish the dark overlay background, which is in the div "wrapper" was 100%. I have this now:

 <div id="wrapper" style="background-color: rgba(0, 0, 0, 0.6);background-size:100%;padding-top:100px;padding-right:100px;padding-left:100px;"> 

....

</div>

How can I make my wrapper 100% height?

Answer 1

You should probably specify 100% twice like this: background-size: 100% 100%; . Width percentage is for width, second for height.

Answer 2

just add a width attribute of 100%

<div id="wrapper" style="width: 100%; background-color: rgba(0, 0, 0, 0.6);background-size:100%;padding-top:100px;padding-right:100px;padding-left:100px;"> 

....

</div>

Answer 3

use this

#wrapper{ 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 4

I believe, by wrapper, you are referring to the black layer.

You can do things like:

<div id="outer">
    <div id="wrapper"></div>
</div>

Here's the CSS you should be using

#outer{
    position: relative;
}

#wrapper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.6);
}

By doing so, you can make your black layer always cover the whole page. I think it is the effect you are looking for.