1

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

this is the HTML part

Arthur Beluci
  • 15
  • 3

1 Answers1

0

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;   
}
dave
  • 2,750
  • 1
  • 14
  • 22
  • it's strange, bc every tutorial I watch, shares almost the same line of code for background and just works for them. Altering the height worked! thx – Arthur Beluci Oct 07 '21 at 01:48