'Background-size: cover; doesnt cover screen

html newbie here, I'm trying to use background-size: cover; to make an image cover the full screen, I'm still getting this gap. How can I fix this? I feel like it has something to do with this part:

 body {
        background-image: url("hexagon.gif");
        background-size: cover;

I tried to replace the word body with .background-image but then the whole page became blank. How can I fix it? Thanks!

<!DOCTYPE html>
<html>
<head>
  <meta name= viewport content= width="device-width initial-scale=1.0">
</head>
<body>
  <div class="background-image">
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      body {
        background-image: url("hexagon.gif");
        background-size: cover;
        background-repeat: no-repeat;
        height: 100hv;
        background-color: #cccccc;
    }
    </style>
  </div>
</body>


</html>
htmlcss


Solution 1:[1]

For cover

What you have missed in your code is,

  1. height:100hv is a syntax error,change it to height:100vh
  2. we also need to set the width of container,you have missed it ,so add width:100vw

Now the code you need is:

<!DOCTYPE html>
<html>
<head>
  <meta name= viewport content= width="device-width initial-scale=1.0">
</head>
<body>
  <div class="background-image">
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      body {
        background-image: url("hexagon.gif");
        background-size: cover;
        background-repeat: no-repeat;
        height: 100vh;/*CORRECTED SYNTAX ERROR*/
        width: 100vw;/*ADDED CODE*/
        background-color: #cccccc;
    }
    </style>
  </div>
</body>


</html>

Runnable Example:

* {
        margin: 0;
        padding: 0;
      }


      body {
        background-image: url("https://picsum.photos/1800/900");/*Example*/
        background-size: cover;
        background-repeat: no-repeat;
        height: 100vh;/*CORRECTED SYNTAX ERROR*/
        width: 100vw;/*ADDED CODE*/
        background-color: #cccccc;
    }

For stretching

use background-size:100vw 100vh;,
or background-size:100% 100%; if both height and width are set as height:100vh;width:100vw;

The code you expect is:

<!DOCTYPE html>
<html>
<head>
  <meta name= viewport content= width="device-width initial-scale=1.0">
</head>
<body>
  <div class="background-image">
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      body {
        background-image: url("hexagon.gif");
        background-size: 100vh 100vh;
        background-repeat: no-repeat;
        background-color: #cccccc;
        /*OR USE THE BELOW*/
        /*
        background-image: url("hexagon.gif");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        height: 100vh;
        width: 100vw;
        background-color: #cccccc;
        */
    }
    </style>
  </div>
</body>


</html>

Runnable Example:

* {
        margin: 0;
        padding: 0;
      }


      body {
        background-image: url("https://picsum.photos/1800/900");/*Example*/
        background-size:100vw 100vh;
        background-repeat: no-repeat;
        background-color: #cccccc;
    }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions