Request to introduce <enhanced:bg-img /> for decorative images

[michaelprys]

Describe the problem

I suggest to add <enhanced:bg /> or <enhanced:bg-img /> for semantic purposes. For instance, some images are not content related and are mainly decorative, so for them I would want to use <enhanced:bg /> instead of <enhanced:img /> from @sveltejs/enhanced-img. Currently, I have to create a <div /> and set its background-image style. However, this approach has limitations, especially in terms of format variety. Unlike with <picture> in HTML, I can only specify one format using the @supports rule in CSS.

Describe the proposed solution

Adding a <enhanced:bg /> for semantic purposes alongside <enhanced:img />.

Alternatives considered

No response

Importance

would make my life easier

Additional Information

I have previously made this request to some frameworks, but so far, no one has been able to implement a solution like this. You could be the first to introduce a feature like this. It will simplify the lives of many developers and increase code quality. Besides, it will improve accessibility for search engines.

Thank you for considering this suggestion!

[eltigerchino]

Closing as duplicate of #12339

[michaelprys]

@eltigerchino Not really what I was talking about, because the amount of code in the #12339 needed for a simple background image is crazy and you need to involve js every time.

[eltigerchino]

@eltigerchino Not really what I was talking about, because the amount of code in the #12339 needed for a simple background image is crazy and you need to involve js every time.

The code you see in that issue is only a workaround but what it's trying to achieve is to optimise images imported in CSS for decorative purposes as mentioned in this issue and JonasKruckenberg/imagetools#563