Parallax Background Images Zoomed In On Mobile View

I'm still pretty new to media queries so I'm not sure if i'm using them 100% correctly here. But for some reason, the home background image and the contact background image do not

Solution 1:

It looks like your background images are not "zoomed-in" but, in effect, "not zoomed out". The backgrounds are displayed at their actual size on screens narrower than 1024px.

This is caused by quite a few declarations in your style.css at lines ~480, ~500, ~525 and ~545 where a bunch of media queries repeatedly set the background-size property of #home, #divider and #contact elements to auto.

You should set the background-size property of those elements to cover if you want the background images to be as small as possible but still cover the element.

On the other hand, setting your background-size to cover would conflict with your chosen parallax method. Whenever you are vertically shifting the background-position via parallax on a background-size:cover element, the "block of white space" you describe appears. This could be fixed using two different methods:

1. Use of negative margins + paddings so the background is zoomed-in enough for the "white blocks" not to appear when the element is on screen
2. Use a different parallax method (absolutely positioned <img> tags or pseudo-elements that you could apply CSS transforms to).

Please note style.css currently has a considerable amount of sub-optimal code. And your markup also has a few notable inconsistencies like, for example, some of your sections feature the parallax-section class while others the paralla-section which is nowhere to be found in your CSS.