HTML background image height-CodePudding

I have made a Login page with the HTML file as follows

 <div style =" height : 100vh; background-image: url(../../assets/login-bg-1.jpg); margin:0; 
    padding:0; background-repeat: no-repeat; background-size:cover; background-position: center; 
        width: auto;">

    ------
    --
  </div>

Now I want the background image to take up the whole screen but still vertical scroll shows and it's not hidden

I tried overflow-y: hidden too.

The scroll hides only two conditions

 1. When I type height:97vh;
 2. When I type margin:-8px the background image disappears and scroll hides.

I don't understand it.

CodePudding user response：

try width:100% and height:100% .

CodePudding user response：

Put height as 100% instead of 100vh and don't put inline styles, it is a bad practice.

height: 100%;

Update: Add margin:0 to the body, as it has default margin.

CodePudding user response：

Will this do?

body {
  margin: 0;
  height: 100vh;
  background-image: url(https://www.fillmurray.com/600/500);
  background-repeat: no-repeat;
  background-size: cover;
  display: grid;
  place-items: center;
}

.login {
  color: white;
  padding: 2rem;
  border: 2px solid white;
}

<div >
  Log in here
</div>