Responsive image in parallax section gets overridden

Shapely
1

Hi,

I have found the custom CSS to set another image as background for my parallax widget. This works fine on desktop, if I make the browser window small enough, it shows the alternative image. However, on mobile (iphone & android) it doesn’t show the smaller image. On my android device, it very shortly shows the smaller image, but then reverts back to the normal background image. Also, on mobile the parallax effect is not working, not on both Androids and iPhones but also not in a small browser window on mobile.
All of this happens at the staging version of my site: https://staging.friddo.com

Your help will be greatly appreciated!

Kind regards,
Jacco

2

After some more research into this, it seems that just setting a new background image is what breaks the parallax behaviour of the element. Is there another way to show a different image for smaller screens in parallax widgets? Your help will be greatly appreciated!

3

hey there

Which section did you want to change the bg image? let me know where you want to change that?
" it seems that just setting a new background image is what breaks the parallax behaviour of the element." - how exactly? can you share some details?

4

Hi there,

It’s about the first section (shapely_home_parallax-2) on staging.friddo.com. I have managed to let it change the image responsively, by adding ‘’!important" to the background image url. This is teh code I now have in my custom CSS:

@media (max-width: 991px) {

…

#shapely_home_parallax-2 .parallax-window.fullscreen{
background-image: url(https://staging.friddo.com/wp-content/uploads/2020/11/bg-06.png) !important;
background-size: cover;
background-position: center;
	}
}

However, the parallax behaviour is gone when the background image is replaced - The transparent box with text and buttons doesn’t scroll over the image anymore, but is stuck on it’s position on the image.

Does that help to further clarify things? If not, let me know!

Thanks!

5

yes, you will lose the parallax feature, it will be alike a background image, you can add something like this to your code:

Background-attachment: fixed;