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 >
<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>
CodePudding user response：
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 >
<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;
}