Pseudo-element Wallpaper is not fit screen

1

{sorry my english not good.}
Hi bro.
I am learning Front-End on freeCodeCamp.
Survey Form by me.
I have a problem about my Survey Form which is similar to project sample of freeCodeCamp.

Untitled
Untitled1895×718 346 KB
.
I don’t know how to delete space from top, left, right, bottom edge of website (please see the picture).
please help me. I am spending much time on it but no solution for me.

1 Like
2

I believe it is because your body has its position: relative; and your body::before position is absolute. So it is not filling the entire background.

If you remove the body’s position and change the body::before position fixed, this removes the empty space!

    body  {
        font-weight: bolder;
    }
    body::before  {
        content: " ";
        display: block;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0.3;
        background-image: url("https://wallpapercave.com/wp/n96gROr.jpg");
        background-position: center center;
        background-size: cover;
        background-attachment: fixed    
     }

Hopefully this helps!! :call_me_hand:

EDIT: Sorry for so many edits, I messed it up a bunch of times haha. But it works for me with the changes above.

1 Like
3

this means position:absolute can’t fit position:relative which is its ancestor?

4

and I want to ask another problem about layout.

Untitled
Untitled1899×609 144 KB

How to set 1 distance smaller than 2 distance? maybe use 2 <br> tag? I think that it isn’t a good idea.

5

You can do that by having your padding-top be a smaller amount than your padding-bottom, for that element.

element {
   padding-top: 10px;
   padding-bottom: 30px;
}

This would make the element larger though, you can also use margin if you dont want the element itself to get bigger.

element {
   margin-top: 10px;
   margin-bottom: 30px
}

You can see the difference of padding and margin here:

1 Like
6

thank you very much. :stuck_out_tongue_winking_eye:

1 Like