Background Size Cover not working
Question
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 © 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
5 answers
solution1
2 ACCPTED 2016-07-06 18:42:57
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%
}
solution2
1 2016-07-06 18:45:37
Background image is a css property, but you're trying to apply it to an image tag. You'll want to do something like this:
HTML:
<div class="myBackground"></div>
CSS:
.myBackground{
background-image: url(columbus-nav-850x637.jpg);
background-size: cover;
/*You can make this background fixed on desktop by adding this:*/
background-attachment: fixed;
}
solution3
0 2016-07-06 18:39:35
Add these properties to div section in css file {
-moz-background-size: cover;
-o-background-size: cover;
-webkit-background-size: cover;
}
solution4
0 2016-07-06 19:00:46
The image you wish to serve as background for your page is placed in a div smaller than your page's size. And hence even if the image filled the div, it won't fill the page.
One of the possible solutions is to apply background image directly on body as suggested by Richard.
However, if you want your image to be in a separate div, you will first need to make the div cover your entire page. Minor update to CSS properties should do it.
div{
position: fixed;
top: 20px;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity: .5;
background-size: cover;
}
Next thing you need to make the image cover the entire div. You can either do it by setting
width: 100%;
height: 100%;
on img tag, or removing the img tag altogether and adding
background-image: url("columbus-nav-850x637.jpg");
in css for the div itself. You might also need to set proper z-index on your "background" div to layer it behind other contents of the page.
solution5
0 2020-06-19 08:22:52
Сheck the "background-attachment" parameter. It should not have the value "fixed"!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.