CODEWITHSUNDEEP
csshtmlbackground-color
Olly F
Olly F

Reputation: 2869

Make an empty DIV height and width of its container

My HTML currently contains a background image that stretches with the viewport. Within that, I plan to place a div that stretches to the height and width of the viewport and has black background colour at 50% opacity.

I've set the div to be 100% width and height. The div is not stretching and I can't figure out why!

HTML:

<!DOCTYPE HTML>
<html lang="en"> 
    <head>
        <title>Tester</title>   
        <meta charset="UTF-8"/> 
        <style type="text/css"> 
            html { 
                background: url(http://cjpstudio.com/wp-content/uploads/2011/12/cityrock1.jpg) no-repeat center center fixed; 
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                background-size: cover;
            }

            #background-color   {
                width: 100%;
                height: 100%;
                background-color: #000000;
            }       
        </style>
    </head> 
    <body>  
        <div id="background-color"> 
        </div>  
    </body>

Upvotes: 2

Views: 18447

Answers (4)

Alireza
Alireza

Reputation: 104730

Basically you need the position as absolute in this case, I just edit your code for you to do exactly what you want:

html {
  background: url(http://chrisjepson.com/wp-content/uploads/2017/06/PrideBus2017_CJP2043-web-700x485.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

#background-color {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  opacity: .5;
}
<!DOCTYPE HTML>
<html>

<head>
  <title>Tester</title>
</head>

<body>
  <div id="background-color"></div>
</body>

</html>

Upvotes: 1

Ren&#233;
Ren&#233;

Reputation: 6176

set a width and (min-)height of 100% on both the html and body tag. Also note the @black instead of black.

And if you want a full page block. Setting the element as fixed with the 100% width and height you have now is probably better(as mentioned in other comments)

Fixed works better because it will match the element to the window element. Absolute will match the element to the nearest ancestor with either relative, absolute or fixed positioning. Fixed is supported since IE7.

Upvotes: 2

David Thomas
David Thomas

Reputation: 253328

For an alternative to width and height you could use, instead, position:

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

This will, or may, allow a user to scroll the page which will move the #background-color element, to avoid the possibility of the user moving the image, use position: fixed instead.

If the #background-color element has an ancestor element with a position other than static this element will be positioned relative to that ancestor, rather than the page/document (for position: absolute) or the viewport (for position: fixed).

Though if this is an attempt at preventing user-interaction with the content of your site it is, of course, doomed to failure.

Edited in response to comment from OP, below:

Can you explain why? I don't understand how/were the div is getting instructions to fill the window. I thought I thoroughly understood position though... I guess not. Anyway, an explanation would be really helpful.

Sure, it's not much of an explanation though, this simply works by positioning the element with either absolute or fixed, and then positioning its axes against the sides of the viewport, 0px from the top, 0px from the left side, 0px from the right side and 0px from the bottom.

Upvotes: 4

Conner Burnett
Conner Burnett

Reputation: 512

The background will not show because there is no content in that div. If you want the div to cover the page without there being any content this seemed to work for me

#background-color   {
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height: 100%;
            background-color: @black;
            }

Hopefully this will work for you :)

Upvotes: 1

Related Questions