BviLLe_Kid BviLLe_Kid - 4 months ago 16
HTML Question

Background Size Cover not working

HTML:




<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="StyleSheet.css" rel="stylesheet" />
</head>
<body>
<header>
<h1>California Road Trip</h1>
<h2>Driving the Coast of California</h2>
</header>

<p>
Highway 1 is the infamous winding stretch of road that follows the pacific coast of the U.S. Visit this sit for a virtual experience. <i>Bon voyage!</i>
<br />
<b>Call for help now!</b>
</p>

<p>
<video controls="controls" autoplay height="300" width="500" loop>
<source src="20160628_110323_64628293200884.mp4" type="video/mp4" />
</video>
</p>

<div>
<img src="columbus-nav-850x637.jpg" alt="Background Image" />
</div>

<footer>
Copyright &copy; 2016.
</footer>
</body>
</html>


CSS:




header{
color: #000;
text-align: center;
border: 500px;
background-color: rgba(255, 190, 0, .5);
border-radius: 20px;
}

p{
text-align: left;
margin-left: 20px;
font-family: sans-serif, Arial, 'Myriad Pro';
}

div{
position: fixed;
top: 20px;
z-index: -1;
opacity: .5;
background-size: cover;
}

footer{
position: fixed;
bottom: 10px;
margin-left: 10px;
}


The background image is not taking up the entire screen. Any help is appreciated.

Here is a JSfiddle

Answer

You must set div img rather than just div. Give the element a height and width of 100% and it should cover the viewport.

div img {
   position: fixed;
    top: 20px;
    z-index: -1;
    opacity: .5;
    background-size: cover;
    height: 100%;
    width: 100%
}
Comments