Hi there, a bit of a long one but I have a solution:
Key point: Webflow only allows users to change images in the editor when they are the highest level element / are clickable.
(no elements can have z-index of -1 as this makes them not clickable)
The fix:
Background Image Wrapper has a z-index of -1 > Set z-index to 0.
Background Overlay has to sit above the image and not be clickable -> Set z-index of 1 and pointer events none
Background Image -> set z-index 0.
Any elements (text etc) sitting on top of image must be ‘relative’ with z-index higher than 1 (if all text content is nested inside a full screen padding global, then use this code snippet)
.padding-global {
pointer-events: none; /* Disable pointer events for this element */
}
.padding-global * {
pointer-events: auto; /* Re-enable pointer events for all children */
}
I’ve gone ahead and refactored a client website with this solution and they can now update all their background images 🙂 Woooo!
