[Upfront] Black background below background image

Hi,
I set an image as parallax background image.
It works well except in some browser window constelations. If I set certain width to heigth ratios I get this what you can see on the attachment.
Why?
What can I do?

  • Adam Czajczyk

    Hello Robert

    I hope you're well today and thank you for your question!

    The problem is with Edge/IE browsers, right? Unfortunately, there are issues if it comes to proper support for parallax in these browsers. There are workarounds that involve using additional jQuery library but they are not perfect as well (I'd say, no better than what Upfront is doing currently) and I'm afraid there's not much that can be done here.

    In fact, it's a general issue with MS browsers, there are many questions and reports on similar cases on various forums across the web and while there are different solutions suggested, there's no "ultimate fix" :slight_frown:

    Some workaround could, probably, be to find a way to disable parallax effect for these browsers only so the background would turn into "static" image while it would work in other browsers but I admit I'm not sure how to achieve that in Upfront.

    I've had a similar question just recently and I passed it to the developers, hoping that they might be able to lend me a helping hand here so please keep an eye on this ticket and as soon as I get additional information from them, I'll let you know here.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Robert

    Ha, you're actually right. I got "influenced" by the fact that you mentioned "browser window constellation" and that I was troubleshooting a bit similar issue related directly to IE/Edge just a couple of minutes before I responded to your post here. I'm sorry about that!

    I checked your site and I was able to see that in Chrome. Interesting thing is that I wasn't able to replicate that in Firefox but in Chrome it's quite easy to see. I wasn't, however, able to achieve the same issue when trying to setup my own test site to replicate the problem.

    Having said that, I'd like to take a closer look at your site's configuration (especially, at the details of that region in Upfront). Would you mind enabling support access to your site so I could check it?

    To do this, please go to the "WPMU DEV -> Support" page in your site's back-end and click on "Grant Support Access" button there, then let me know here.

    I'll check the config and Upfront settings, try to replicate that on my end and look for solution.

    Best regards,
    Adam

  • Adam Czajczyk

    Hello Robert

    I must say I'm a but stumped with this. I checked the site, tried to replicate this on my end (with no luck) and tried to find out what's causing this but I"m confused.

    The region (with that parallax) seems to be slightly "higher" than the background image itself. That would explain why in some cases the image is "too short" (hence the "black belt"). I've found that if you edit the theme in Upfront Builder and go to "Edit Grid" option, the "Page Background" is set to black. That would make sense.

    However, I wasn't able to find any place in CSS on front-end where this "black background" would be reflected (in front-end css the page background seems to be... white).

    I would suggest trying to adjust these two thing (the region height and Grid Background) but the question is, taking your last post into account, if you have edited the site in Upfront Editor as well. The point is: the grid would have to be edited in Upfront Builder but if there were changes made via Upfront Editor - it wouldn't take effect on the site unless you'd "reset theme", which on the other hand would remove all the customizations made via Editor...

    So, did you edit the site in Upfront Editor at all or only in Upfront Builder?

    Best regards,
    Adam

  • Robert

    Thanks.
    I don't understand this part: "The region (with that parallax) seems to be slightly "higher" than the background image itself. "
    The region is 700 px high and the image in 938 px high. Which one should be reduced?
    Is it best practice to have region the same height as parallax image?

    I set Background region to white in Upfront Builder.

    Let's say that I'm 95% sure that I did evertyhting in Upfront Builder. But it's not imposible that I sliped into Upfront Editor during some late night "have to finish this" pushing session.

    BR Robert

  • Adam Czajczyk

    Hello Robert

    Thank you for additional information.

    I have accessed the site again and noticed that "page background" in Grid settings in Builder is not set to black anymore but there was still that "black belt" showing up. And I still wasn't able to find it anywhere in CSS, furthermore, it only shows for me in Chrome but not in Firefox so I'm beginning to think that it's somehow related to some specific CSS in Chrome (maybe in connection to image transparency if the background image (the main - page-wide - background).

    Even more strange is that when I set "position" of that background to 50% for both X and Y axis (btw, it's image position, not size aspect ratio!) the issue goes away, just like you suggested in your initial post. I must admit I'm kind out of ideas about it. For now, I left it set to 50% so you could confirm if that doesn't happen now (I'm not 100% sure if it's "not happening anymore" or if it's "not happening for me")...

    The original Y position value was 35% so you can set it back like that at anytime and if you want to keep it this way, let me know and I'll include our developers in the case as I'll need a helping hand on this (please note: it might take them a bit longer to respond than it takes me here on support forum as they are dealing with a lot of complex issues).

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.