Background-size: cover; doesnt cover screen

April 8, 2022

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>

>Solution :

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");
        background-size:100vw 100vh;
        background-repeat: no-repeat;
        background-color: #cccccc;
    }