Fixed hero sections backgrounds

Support
#1

Hi,

I’m trying to set up a page like this site https://www.haasht.com/ but without the paralax effect on the images. I’m playing around here: https://cache.nl/fixed/.

The 2 fist div’s is what I want but after the 3rd div need to be fixed so when the 2nd div scrolls over the top, the 3rd div shows up fixed and so on.

I think it must be possible in Pro but can’t figure out how… Can you please help me or point me in the right direction?

Or how this deze is build: https://demo.theme.co/ethos-2/

Can I get the .tco file of that demo?

THX, Carel

#2

Hello Carel,

Thanks for writing to us.

I have created a page on your server which is based on the Ethos-2 demo page. We have kept the page in draft mode. You can access the page and check its settings.

Hope it helps
Thanks

#3

Hi, Thank you but on this page the images are still scrolling a lot. Take a look at https://demo.theme.co/ethos-2/ Here stay the images almost fixed. BTW this is not working on a iPhone I see… This example https://www.haasht.com/ is also good on a iPhone but I can’t figure out how to set this up…

In the new version of this demo https://demo.theme.co/ethos-photography/ they are also scrolling a lot but I want to achieve like to old demo.

THX, Carel

#4

Hello Carel,

I’ve checked on my side, and the page is working correctly. I tested it using the Google Chrome browser (version 140.0.7339.186) as well as in Chrome’s Developer Tools responsive mode for iPhone, and everything displayed fine. I recommend purging all caches from your cache plugin, temporarily deactivating the cache plugin, and clearing your browser cache before checking again.

Thanks

#5

Hi, yes it’s working but not with the effect I want. The background images are all scrolling and in those examples the images are almost fixed and the next section/div is realy scrolling over it.


Please check those examples I hope you see want I mean.

THX, Carel

#6

Hello Carel,

I tried to access your shared video, but it is not working on my end. For the fixed image, you can disable the Parallax option and set the background-attachment to Fixed.

About-The-Tests-Page-Cornerstone-09-24-2025_12_44_AM
About-The-Tests-Page-Cornerstone-09-24-2025_12_44_AM638×1210 21.3 KB

Hope it helps
Thanks

#7

Thank you! That’s it!

Grtz, Carel

#8

You are most welcome, Carel.

#9

Hi,

I’ve discovered another problem… On my desktop (tested in Chrome and Firefox), I did what you suggested and set the background images to Fixed and Parallax off. I now have exactly the effect I was looking for here: https://cache.nl/themeco-test/. However, on my iPhone, the images are all displayed one below the other and don’t scroll over each other, and the background images are incredibly zoomed in and unrecognizable… Do you have any ideas on how to fix this?

#10

Hello Carel,

I’ve checked your website from my end using an Android device and the Google Chrome browser (version 140.0.7339.155), and everything appears to be working fine on my end.

Thanks

#11

Then it must really be an Apple iOS related problem because I tested it here on 2 iPhones and 2 iPads and the problem is in both the Chrome browser and the Safari browser…

If I Google: “ios fixed background image” I see this is a know issue but can’t find a proper fix…

#12

Hello Carel,

The issue with fixed background images on iOS is a documented limitation of both Safari and Chrome browsers on iPhones and iPads. Unfortunately, iOS does not fully support the background-attachment: fixed; CSS property due to known performance and rendering constraints on these devices. As a result, fixed backgrounds may appear incorrectly or fail to display as intended. I would suggest setting the background attachment to scroll. To do this, please click on the attachment and set the scroll option to the mobile screen.

Themeco-test-Pagina-Cornerstone-09-27-2025_05_07_PM
Themeco-test-Pagina-Cornerstone-09-27-2025_05_07_PM1300×1026 53.6 KB

Please note that it will help you eliminate the zoom effect on the background image, and it will not function as a fixed background attachment.

Thanks for understanding

#13

Hi,

I found this as working on IOS:

body::before {
content: ‘’;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-image: url(https://cdn.pixabay.com/photo/2024/03/14/08/52/pug-8632718_1280.jpg);
z-index: -1;
}

body {
padding-bottom: 2000px;
}

Is there a way to use this body::before fix on multiple background images on a page in PRO and hero header…?

THX, Carel

#14

Hello Carel,

It would require custom development to implement with the Pro theme. I would suggest you please contact a developer who can assist you with your concerns, or if you need us to implement the setup for you, you can get our One Total Care service . You can learn more about Total Care here. Please note that we don’t provide custom development support; it is out of the support scope.

Thanks for understanding.

#15

THX! Yes I understand and I now fixed on IOS devices by this. For now this is good for me.

@supports not (-webkit-overflow-scrolling: touch){ /* CSS for other than iOS devices */
.parallax-bg .x-bg-layer-lower-image {
background-attachment: fixed !important;
background-size: cover;
}
}

#16

Hello Carel,

Glad to know that things are well for you and you were able to achieve the solutions for your issue.

Thanks