CODEWITHSUNDEEP
htmlcss
Grizzly
Grizzly

Reputation: 5953

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

Upvotes: 0

Views: 5635

Answers (5)

Yurii P.
Yurii P.

Reputation: 71

Сheck the "background-attachment" parameter. It should not have the value "fixed"!

Upvotes: 0

d_shiv
d_shiv

Reputation: 1790

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.

Upvotes: 0

will
will

Reputation: 2007

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;
}

Upvotes: 1

gwar9
gwar9

Reputation: 1082

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%
}

Upvotes: 2

saikishore madugula
saikishore madugula

Reputation: 9

Add these properties to div section in css file {

-moz-background-size: cover;

-o-background-size: cover;

-webkit-background-size: cover;

}

Upvotes: 0

Related Questions