BviLLe_Kid BviLLe_Kid - 1 year ago 47
HTML Question

Background Size Cover not working


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

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>

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

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

Copyright &copy; 2016.


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

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

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

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 Source

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%