Make an empty DIV height and width of its container
- by Olly F
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>
