[Feature proposal] Background-image reset

[illycz]

For responsive variants would be useful something like .bg-none for background: transparent.

[adamwathan]

We actually do have bg-transparent already, do you need something different than that?

[hacknug]

I agree it would make sense to have a utility for resetting the background-image of an element (plus it would have almost no impact on the file size).

My only issue with this would be that adding a new module just for this wouldn't make much sense and, since someone might need to define multiple background-images, this would be something a plugin should take care of.

[illycz]

@adamwathan bg-transparent does not reset background-image.

[hacknug]

It doesn't but it does the exact same thing as background: transparent which you mentioned.

[illycz]

I don't thing so. Tailwinds .bg-transparent generate background-color: transparent which not remove background image. background: transparent remove background image.

[adamwathan]

Coming back to this, can you give an example of usage? Do you have your own custom utilities for adding background images right now? If not, how are you adding background images that you want to remove with this class?

[nicolas-giuristante]

Here is an example, not an everyday problem but I wanted such a utility class myself:

I have an asymmetric layout with a background image :
bg-contain bg-right bg-no-repeat

On mobile, it's atrocious and would like to remove it, I could be able to use those responsively :
user-bg-id bg-black bg-image-none(figurative) lg:bg-contain lg:bg-right lg:bg-no-repeat

Where:
user-bg-id -> background-image { url(); }

Not sure if it makes sense nor if I'm correct with this approach, but that would just be useful. Otherwise I have to create it with media queries and such. 100% doable yet requires ugly custom CSS.

[4refael]

I think bg-none can be useful, but for background-image: none and not for the suggested background: transparent.

[adamwathan]

Since the only way for bg-none to work would be for you to implement all your custom background images as classes as well (inline styles will, or at least should, trump classes), going to close this as a "best done by the user if they need it" sort of thing.

It may be useful to explore adding a dedicated backgroundImage core plugin where you can provide URLs to your own background images but I think we can discuss that in a separate issue if people want it.