Parallax not working as I want it too

[ruenel]

Hello @logoglo,

You have inserted this custom CSS:

@media(max-width:978px){
    .x-bg-layer-lower-image{
        background-position:top -350px center !important;
        background-size:cover!important;
    }
}

@media(max-width:767px){
    .x-bg-layer-lower-image{
        background-position:top -200px center !important;
        background-size:cover;
    }
}

.x-bg-layer-lower-image{
    background-attachment:fixed;
}

This means that the background attachment is still fixed even on smaller devices. In my previous post, I have indicated that you use @media CSS rule so that it will only be applied on larger screens. You should need this code instead:

@media(max-width:978px){
    .x-bg-layer-lower-image{
        background-position:top -350px center !important;
        background-size:cover!important;
    }
}

@media(max-width:767px){
    .x-bg-layer-lower-image{
        background-position:top -200px center !important;
        background-size:cover;
    }
}



@media(min-width: 980px){
	.x-bg-layer-lower-image{
    	background-attachment:fixed;
	}
}

The code above serves as an example code. Feel free to modify it when needed. Please note that custom coding is beyond the scope of our support. You will have to maintain any custom coding to make sure that it will still work after any updates or does not create any issues or incompatibility in the future.

Best Regards.

[logoglo]

Thanks, I want it fixed on all screens so the parallax works, and it does on most devices I tested, the background works, and shows as needed, on android phones, tablets etc, it’s only on apple devices it’s not working.

[ruenel]

Hello @logoglo,

Yes, the fixed background will work on all screen sizes. The problem is that on some smaller screens, you will only be seeing the blue area of the background image since most of the objects like the sofa, chair, vase, plants, etc. are placed at the bottom part of the image which they would be behind the other section. In the meantime, can you change your background position unit value from px to vh like: background-position: top -30vh center !important;

Kindly let us know how it goes.

[logoglo]

I’m trying to explain, its working on small screens, and even a galaxy tablet…everywhere, it’s showing the image as required, see my screenshots, my android phone it works, its a super small screen, other android devices it works, a galaxy tablet, it works, you can see the whole image….it’s ONLY on apple devices that it isn’t working…,please see the screenshots above, all that are not working are apple devices…the screen size shouldn’t matter, I have the code to cater for all screen sizes, it works in google console with the different screen sizes, it works in the backend, in cornerstone with different sizes…it seams to be only apple devices this happens…

You say it happens on smaller screens, but no, it happens on my iPad, and other apple devices like I stated above, Please check.

This is my Xiaomi redmi note 10, screenshot…

To state again, it seams to be only apple devices where the image isn’t showing as required.

[logoglo]

I changed the container height to 100vh, and kept the image size to cover, and again, its still happening…

Its a device thing, im sure about it…look:

Android devices:

Apple devices:

[christian]

Hey @logoglo,

iOS 13 and beyond is having an issue with background-attachment: fixed. Our Classic Section that uses that CSS method also has that issue and there is no solution to that currently.

Since the background-attachment: fixed method and the built-in parallax option does not satisfy your requirement, you will need to consult with a developer to code a custom parallax solution for you that is cross-browser compatible. If you want us to create that, you can reach out to our Elite team here: https://elite.theme.co/

Thanks.

[logoglo]

Oh man, that sucks, whished I’d knew before…so even your parallax option built into cornerstone doesn’t work?

[christian]

Hey @logoglo,

It is only our Classic Section that uses the old CSS method of background-attachment: fixed that has the issue.

The V2 (non-classic) Section parallax is Javascript powered and that one works. It just smoother and doesn’t behave like the old method which is not what you want.

[logoglo]

Understood. I actually just settled for your parallax as it works across all browsers. Thanks.

[christian]

Glad to hear that, @logoglo.