Site Origin Page Builder Background grey bar on images

Hi Alex.

I find that hard to believe as I have used larger images to see if that will fix the problem, and the problem still exists. also.. Wouldn’t the grey bar size be in relation to the size of the image? However on my webiste the grey bar gets bigger and bigger on each page builder row background image the further down the page I scroll. This happens until the background images at the bottom of the page are completely covered with a grey bar regardless of how large or small the image is.

Thanks

Hi Alex

Thanks again for your quick reply. Sorry to question your previous reply.. I have seen this problem being attributed to theme compatibility issues in other posts.

Would it be possible to instruct me on how to change the “Limit Parallax Motion” value or please could you give me some example CSS to fix this problem.

I have added images that are 1920×1080 pixels in size and also images that were double that size in the past to fix the problem but it didn’t work and the grey “bar” still covers all of my background images the further down the page I scroll on all browsers. I have this problem on every page of my website that uses the Site Origin Page builder and it is very disheartening as I have had this problem for over 2 years now.

Here is an example page with this problem (page may be NSFW) http://www.gogohopping.com/patpong-the-strip-information/

Hi Alex.

Thanks for your quick reply.

I have done what you suggested. It looks like the problem may be theme related. After I switched to the default “Twenty Seventeen” theme the problem appeared to be fixed. The Twenty Seventeen theme displays the parallax background slightly differently from my current theme “Sydney” by athemes and I was wondering if that had something to do with it. On my Sydney theme the parallax background appears dim (Sorry not sure of any technical differences)

After your suggestion I decided to try out some other themes including Vantage by Site Origin but I found the theme changed the Site Origin plugin so as to remove some background image options. I also tried PoleStar and Unwind but I feel that I prefer my current Theme for the moment. I would be happy to discuss this with you.

In the meantime, would it be possible to provide some CSS code for me to align the background parallax image position? I will also contact my current theme provider to see if they are able to solve this problem another way.

Thanks for your time.

Paul

Hi Alex

I just tested this new theory and the problem still exists. I have removed all CSS from one of the pages where this problem exists but the problem was not fixed.

I have also uploaded uploaded larger background pictures, sized 3840 × 2160 px, as suggested by the theme creators but this problem was still not fixed. https://athemes.com/forums/topic/problems-with-site-origin-background-parallax-images/

Thanks

Paul

Hi Alex,

Thanks again for your reply.

I have been playing around with Site Origin a little more and I may have been using the incorrect terms. I believe the problem I am having only affects the “background image” of the row itself (which has a parallax affect to it) and not the parallax background image of the widget.

As you know, the widget background image, in my case visual editor, has the option to change how the background image is displayed, tiled, fixed, parallax original size etc. However, the background image of the row itself does not have any customization options in the row style’s design tab.

It appears this problem I am having is the background of the website appearing and the background picture of the row is out of position. This appears to only affect images where the image is used as the background of the row and not the background of the widget. I do like the way that the background image looks when used as the background image of the row rather than the widget (dimmed & parallax) so I would hope to fix this problem rather using the latter option. Also i often use more than one widget in a row so using the image as the widget background is not a suitable choice.

I have also noticed that sometimes, but not always, if I scroll to the bottom of the page and then back up to the top of the page, on some pages but not all, the problem may fix itself but this is rare and doesn’t happen often.

Again, here is one page that has the problem… http://www.gogohopping.com/patpong-the-strip-information/ If you scroll to the bottom you’ll see that the background images of the three bottom rows do not display correctly. I have also uploaded a background sized 3840 × 2160 pixels to the 3rd row from the bottom to test whether the problem is due to the image size being to small but as you can see the problem still occurs even with the very large image as the background image of the row.

Could you have a quick look at the problem again now knowing that the problem occurs with the background image of the row and not the background image of the widget? Sorry for any confusion, I may have used some incorrect terms in my original post. I appreciate any help that you are able to give.

Thanks again

Paul.

Hi Alex,

Thanks for your reply.

I will contact the Athemes Sydney theme support as suggested..

However, I was unable to see the row styles background display settings as you said. Below is a screenshot picture of my row display styles. http://www.gogohopping.com/wp-content/uploads/2017/09/dvdvdvdv.png

Alex, thanks for your help.. I was wondering if there is some CSS that could fix this problem. The problem looks like the background image of the row is set too low and becomes lower the further down the page I scroll. Would it possible to provide CSS to set the position of the background image? If I were able to do this I think it would fix the problem.

Thanks

Paul.

Hi Alex,

I was able to fix the problem by contacting my theme provider and adding the following CSS

.panel-row-style {
background-position: top !important;
}

Thanks

Paul