Make an empty DIV height and width of its container

Posted by Olly F on Stack Overflow See other posts from Stack Overflow or by Olly F
Published on 2012-07-02T21:04:40Z Indexed on 2012/07/02 21:15 UTC
Read the original article Hit count: 249

Filed under:
|
|
|

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>

© Stack Overflow or respective owner

Related posts about html

Related posts about css