I recently acquired a WordPress website from its previous owner, and I'm encountering an issue with the parallax section at the top. It seems to be scrolling at a slightly slower pace than the rest of the page. I've tried adjusting the width and other settings, but it appears that the problem lies in the original image crop size. I'm struggling to figure out how to change the original crop.
When the page is displayed in full screen, the scrolling works perfectly fine. However, when I reduce the screen size, there's some white space visible while scrolling down. I believe resizing the original crop to be smaller will solve this issue and provide a better visual effect even when the page is resized. (I have also tested using a larger image, but encountered the same issue). You can find all the referenced images mentioned in this post on this link.
Check the last image for the white space observation.
Refer to the middle image for the desired scroll effect.
This is the HTML code snippet for the image:
<section id="hero-header" data-speed="8" data-type="background" style="background: url("http://playgrounddistribution.com/wp-content/uploads/2017/03/playground-logo-1.jpg"); ?>') 50% 0 no-repeat fixed;">
Look at the first image on the Imgur gallery linked above for the background script reference.
Hero Header
#hero-header {
height: 100%;
width: 100%;
position: relative;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;
}
Here's a portion of the code related to resizing, hope this helps:
@media handheld, only screen and (max-width: 769px) {
#hero-header {
background-position: center center !important;
background-attachment: scroll !important;
}
}