✅ 🔗 🚀 Feature Request: Responsive controls for background type, overlay & gradients (Duplicate of #10247) - [ED-9310]

[eastriverstudio]

Prerequisites

• I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
• The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

Firstly, I know the gradient part I mention later on in this request has been mentioned here #6783. However I'm looking at this as the complete set of background features lacking responsive controls, not just the gradient settings. However, it is now 2020 and can't see why gradients have not got the same controls as images.

What I'd like you to consider is that whilst the reponsive controls for a background image itself have been implemented previously, the missing features which would compliment this and allow more creative uses is that there aren't the same responsive controls for any of the other background options such as background type, background overlay and background gradients and I'd like to suggest these are considered as a new improvement for a future release.

Having these extra responsive background options would allow more creative freedom and allow certain visual tricks to be more easily achieved, overriden and adjusted across devices without resorting to the use of custom css which is unrelated to the background options which are set in the settings panel.

For example it is currently possible to easily achieve an overlap image effect (like one below) on desktop using the background overlay and setting a custom width in the css. However because we have no responsive controls for the background overlay itself it is not possible to adjust or remove the image on mobile devices (where the overlap style doesn't work) without resorting to custom css overrides and media queries which aren't as intuitive and separate to where we set the image itself. Whilst It is nice to be able to change the image to a different one responsively, what about if it just needs to be removed or the background type needs to changed to something that works better on a smaller device?

Likewise with background gradients not having any responsive controls, it means it is way less intuitive to create layout effects using gradients if we can't alter how the gradient behaves across devices without resorting to custom css, which again isn't intuitive in my opinion when setting the gradient options somewhere else in the settings.

I hope this illustrates what I believe are still the missing elements to make backgrounds controls truely intuitive and allow us to achieve more visual tricks and effects that work responsively directly through the various background settings.

[addMitt]

Yeah it'd be nice to be able to change even the basic Background color of a section per device. The Background Type > Classic > Image property has responsive options, but Color does not? Baffling.

[arielk]

Please note that you can change image per device for background overlay. Regarding the responsive gradient please follow this issue: #10247

Thanks for you feedback!

[nicholaszein]

Hello everyone!

📢 We're happy to announce that the issue you raised was resolved in Elementor v3.19.0! 🥳

✅ Feel free to check it out and update your plugin to the new version!

Check the changelog for more information:
Changelog of Elementor and Elementor Pro

Cheers 🥂