White space when i scroll a semi-parallax in a resized window

I got a wordpress which i took over from another guy, and it appears that there’s a bug with the parallax section in the top. Well semi-parallax, it scrolls somewhat slower than the mainpage. I’ve tried fiddling around, changing width and stuff like that. The issue seems to be that the original crop is too small, but i can’t figure out how i change the original crop.

Because when it’s full screen it works perfectly when scrolling, but if i make it half of the screen, there’s white space when i scroll down. So i assume it’s the original crop that needs to be smaller, so when it resizes there’s still “more image”. (And yes i’ve tried using a larger image, same issue). All referred images in this post can be found on this url

See last image for the white space

See middle image for desired effect when scrolling

This is the html code 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;">

See the first image in the imgur link above (this url) for the background script.


#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;

Some of the resize code, i hope this is enough

@media handheld, only screen and (max-width: 769px) {

    #hero-header {
        background-position: center center !important;
        background-attachment: scroll !important;

Read more here: White space when i scroll a semi-parallax in a resized window

Leave a Reply

Your email address will not be published. Required fields are marked *