Great questions and thanks for pinging me.
Are you by chance on a touch screen laptop, @Macker?
If so, we actually have some javascript in place which prevents fixed backgrounds images from rendering as fixed on touch screen devices. We do this because there are some known repainting css issues caused by fixed background images on elements (it’s also really heavy on CPU’s).
A work around that may help is to set a Fixed element as the background, try the following:
- Make your fixed bg images set to Position: Fixed
- Width: 100%, Height: 20vh (or whatever works best)
- You may also need to use padding / margin on the adjacent sections to create space
- Adjust the z-index value for these elements to sit behind all other elements
The above steps may be tricky to implement because there are several fixed image sections, but should be possible. You may need to work in interactions to hide/show these fixed sections based on where you are on the page. Alternatively, you can leave the design as is and for all users on touch screen devices the images will not appear fixed, but for other devices they will.
Hope this helps 