HTML background image height

Question

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.

Edit working minimal code https://stackblitz.com/edit/web-platform-juvyuk?file=index.html,assets%2Flogin-bg-1.jpg,page2.html

I have got the issue resolved as had to give responsive class to image that i was using.

Provide minimal working code. https://stackoverflow.com/help/minimal-reproducible-example — , Sep 30 '22 at 06:04
This is the exact code that i am using i have not added any CSS in the style.css file. — Satyam thassu, Sep 30 '22 at 06:26
But from this StackOverflow community can't able to find out what is the problem. Create a working snippet rather than separate HTML & CSS codes. — , Sep 30 '22 at 06:27
Try margin:0 on the body element. The body has a default margin of 8px. — Adam, Sep 30 '22 at 06:38
https://stackblitz.com/edit/web-platform-juvyuk?file=index.html,assets%2Flogin-bg-1.jpg,page2.html — Satyam thassu, Sep 30 '22 at 06:53

score 1 · Answer 1 · answered Sep 30 '22 at 06:27

1

try width:100% and height:100% .

answered Sep 30 '22 at 06:27

Atefeh-masoumi

11
2

It does not display anything when i type this. – Satyam thassu Sep 30 '22 at 06:34
3

That won't work because it will be 100% of the parent element which is the body and that won't be the full screen height unless you set the height of that to 100vh or 100%. https://stackoverflow.com/questions/5721904/make-body-fill-entire-screen – Adam Sep 30 '22 at 06:43

Naik Javaid · Answer 2 · 2022-09-30T07:53:47.337

1

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.

edited Sep 30 '22 at 07:53

answered Sep 30 '22 at 06:29

Naik Javaid

150
1
8

height:100% shows nothing. and yes i will make a seperate CSS file for styles. – Satyam thassu Sep 30 '22 at 06:58

score 1 · Answer 3 · answered Sep 30 '22 at 08:07

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 class="login">
  Log in here
</div>

HTML background image height

3 Answers3