Fixed section background on mobile devices

[janschuermans]

Hey there!

I just managed to fix some of my section backgrounds so that the content hovers over it by scrolling down. I just inserted “fixedbg” to “section -> customize -> class” and added “.fixedbg .x-bg-layer-lower-image {background-attachment: fixed;}” to my Content CSS on that page.
This works perfectly on desktop devices, but not on any mobile device I testes (iPhone and iPad). On them the background pictures are scaled way to big and it seems as they are scrolling, not fixed.

Any ideas? Thanks in advance!

[jade]

Hi there,

I have just tested this on my local setup and it seems to work fine even on mobile.

Would you mind providing the direct URL and the section you are referring to so that we can check it?

I tried checking your site but I could only the homepage.

Hope this helps.

[janschuermans]

Thanks for your quick reply!
You can find my sandbox page here: https://www.schuermans.de/start
I tried to fix the fullscreen picture sections and named them gap_*. Thanks for your help!

[christian]

Hey @janschuermans,

Your background size’s set to fix which is not a correct value for background size. Change it to cover or in your CSS, try adding this declaration:

background-size:cover

Hope that helps.

[janschuermans]

Thanks!
Sadly this didn’t work for me. I played a little with the different background-sizes and forgot to put it back to “cover”. The other background sections were set to cover.
When I switch the resolution in content builder to “480px & smaller” evething looks perfect, but on my phone an pad the pictures are way to big (zoomed in). I tried different browsers (safari, chrome, thunderbird) with all the same result.

Any additional ideas?

[christian]

In this case then, you will need to consult with a third party developer to work closely on your project. He/she will have to create some custom media queries for you to position the background image on the devices you have described.

Thank you for understanding.