Problem with background-image NOT covering the whole page

HTML-CSS
1

Hi,
I have a problem with my background image. In normal view it´s fine, but when I scroll the view to smaller (e.g. 80% or less), there is white space on the bottom of the page (the background image is not covering the whole viewport).
I searched, tried various changes, but nothing worked. How can I fix this?

My code:
Project Link - https://codepen.io/mmajam/pen/ZxgXYv?editors=0010

Now I exported my code and opened it in my browser, and there it works! However, in the codepen.io the same code doesn´t work (the white space is there). How can I understand this?? And is there a way to fix it even in codepen?

Thank you for your advice. :wink:

EDIT: I see another difference in the browser x in codepen: in the browser the calculator sticks to the top and in codepen there is a margin! How comes?

2

I am not sure exactly what effect you want with the background image, but I think the reason there is a white space is because there is a spelling error on line 13 of your CSS.

You have

heigh: 100vh;

Which should be:

height: 100vh;

When I change this on codepen the white space goes away for me.

Hope this solves the problem you are having. :slight_smile:

EDIT: If you fiddle around with the margin property of the calculator (line 47), you should find the reason there is a margin. Also the top property in the calculator class will not have any effect as you need to set the position property; see https://www.w3schools.com/cssref/pr_pos_top.asp

3

Ohhh! So not a coding problem! :open_mouth: :blush:
And I spent soooo long searching and trying! :roll_eyes::face_with_raised_eyebrow::thinking:
Thank you very much!!! :wink: :hugs: :rofl:

4

No problem :grinning:

5

Thank you also for the advice regarding margin! I fixed it with the “position: relative” property. :wink:
Thank you very much again!!! :wink::hugs: