Background doesn't work, it goes up and get cut in half

Question

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;   
}

this is what it lookslike

Answer 1

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;   
}