0

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?

Daniel Fein
  • 317
  • 1
  • 6
  • 18

4 Answers4

0

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

Mikhail Vladimirov
  • 13,572
  • 1
  • 38
  • 40
0

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>
mhartington
  • 6,905
  • 4
  • 40
  • 75
0

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;
}
Sahil Popli
  • 1,967
  • 14
  • 21
0

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.

pochen
  • 873
  • 12
  • 22
  • That is the effect I'm going for, except it didn't work :/ the black layer disappeared – Daniel Fein Mar 05 '13 at 04:20
  • The div believes it reached the end of the page before it actually did. Any idea how to make it know where the end is? – Daniel Fein Mar 05 '13 at 04:32
  • @DanielFein you must have extra css in the outer div. show me your code. anything like max-height, min-height, can harm this technique – pochen Mar 05 '13 at 04:48
  • @DanielFein In addition, if you do want to apply stuff like min-height, you can try this out http://codepen.io/princemaple/pen/jdiHL I guess this enough for you to accept my answer. – pochen Mar 05 '13 at 04:55
  • is it possible to just use javascript to get the whole document height? and just change the background height like that for now? – Daniel Fein Mar 05 '13 at 05:00
  • Also, turns out the wrapper is being caught by the height of my container div (if you look at the source code you'll see it. The container contains all the info but the height doesn't change dynamically? – Daniel Fein Mar 05 '13 at 05:02
  • @DanielFein of cause you can use js to do anything you want. Just if you don't want to use js, to achieve the effect, you have to arrange your div structure like mine. the css I provided are the absolute essentials. you add things to meet your requirement, but not change/delete the lines I provided. – pochen Mar 05 '13 at 05:06
  • @DanielFein does it not work? have you checked out the codepen one? that's working absolutely fine. – pochen Mar 05 '13 at 05:08
  • @DanielFein just had a good look at your website's source code, omg why in the 21st century are you still using tables to structure your webpage? – pochen Mar 05 '13 at 05:14
  • Are they not a good way to keep things even? Do you just recommend divs? – Daniel Fein Mar 06 '13 at 01:34
  • @DanielFein Tables are for things that are really tables, like a table of data, you used table for movie information, that's correct. Using tables to format your webpage is so wrong. Divs and other block elements are for this formating/semantic purpose. – pochen Mar 06 '13 at 12:02