Solving the puzzle of cover
Your code is almost there, but here are a couple of key things you missed:
height:100hv has a syntax error, it should be changed to height:100vh- You also need to set the width of the container, so make sure to add
width:100vw
The corrected code should look like this:
<!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*/
width: 100vw;/*Added width*/
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*/
width: 100vw;/*Added width*/
background-color: #cccccc;
}
Extending boundaries with stretching
To stretch your background, use background-size:100vw 100vh;,
or background-size:100% 100%; if both height and width are set as height:100vh;width:100vw;
The revised code looks like this:
<!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;
}