changing hero / background images in modx without access to less / css

I want any user being able to change / choose a hero image for a website. Usually I set up these images in the less file. But I don't want to give access to these less / css files in modx. The less / css workflow should be beside modx on the ftp-server.

So how can I change any background image in modx without access to less / css?
I have one example with an additional div-tag and inline-styling:



Maybe there are better solutions?

(yes, I can clean up the inline-styling a bit with the css-class "hero-image". I only want you to see the styling of this example. Though in this solution some inline-styling is needed to use the teplate variables of modx?!)

How you've done it is how I would do it personally.