how to set this div image to full screen so that it hides the blue background color

Question

i made a div and set its background image but background image is not covering full screen, theres some space around it. That blue color is body color.

pls refer to image here

i am very beginner to web development pls forgive my silly mistakes

#one{
    background:linear-gradient(0deg, rgba(0, 0, 0, 0.7) 10% , rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 75%), url("https://picsum.photos/500");
    padding-top: 168px;
    padding-bottom: 100px;
    color: white;
    border: none;
    background-size: cover;
}

<div id="one">
        <center>
        <p id="p1">Unlimited movies, TV <br>shows and more.</p>
        <p id="p2">Watch anywhere. Cancel anytime.</p>
        <p id="p3">Ready to watch? Enter your email to create or restart your membership.</p>
         
         <input id="mail" type="text" >
         <input id="mailb" type="submit" value="Get Started">
        </center>
    </div>

Your snippet does not appear to reproduce the issue - or at perhaps clearly do so. Perhaps adjust it to make it more readily apparent with some awful color like lime to the part you wish to cover — Mark Schultheiss, Jun 28 '22 at 15:03
Does this answer your question? [Make a div fill the height of the remaining screen space](https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Alex Angelico, Jun 28 '22 at 15:44
Check if the body element or another parent has some margin property that prevent the div to fill the whole space. Inspect the blue space and check what is causing it.(f12) — Humberto, Jun 28 '22 at 14:58

Laaouatni Anas · Accepted Answer · 2022-06-28T14:59:38.643

add this line to your CSS

body {
    margin: 0;
}

this is because, browsers add a little margin.
so you just need to manually reset it to 0

body {
  margin: 0;
}

#one {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7) 10%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.7) 75%), url("https://picsum.photos/500");
  padding-top: 168px;
  padding-bottom: 100px;
  color: white;
  border: none;
  background-size: cover;
}

<div id="one">
  <center>
    <p id="p1">Unlimited movies, TV <br>shows and more.</p>
    <p id="p2">Watch anywhere. Cancel anytime.</p>
    <p id="p3">Ready to watch? Enter your email to create or restart your membership.</p>

    <input id="mail" type="text">
    <input id="mailb" type="submit" value="Get Started">
  </center>
</div>

score 0 · Answer 2 · answered Jun 28 '22 at 15:06

By default, there is some margin in body. So you can remove that by specifying margin and padding as 0.

body {
    padding: 0;
    margin: 0;
}

Also to keep the background image in center, add these two lines of code in your #one style.

background-position: center;
background-repeat: no-repeat;

I hope my answer helped you.

how to set this div image to full screen so that it hides the blue background color

2 Answers2