I'm creating a website login windown, and the background is an image, but the image always get cut in half and go up.
this is the code I'm using:
.loginbody {
background: url(img/LoginBackground3.jfif);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
font-family: sans-ser``if;
}
CodePudding user response:
It's hard to tell without seeing your HTML as well, but your containing element probably isn't the full height of the viewport.
If you want to make a fullscreen background image that always fills the viewport, apply your CSS to the html
element of your page:
html {
background: url(img/LoginBackground3.jfif) no-repeat center center fixed;
background-size: cover;
}
Alternatively you could set the viewport height on your loginbody
element to 100vh
, making it the full height of the viewport:
.loginbody {
background: url(img/LoginBackground3.jfif);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
font-family: sans-serif;
height:100vh;
}