[Feature Proposal] background-position-x and background-position-y utilities

[philwolstenholme]

We have .bg-left etc, but that acts on background-positon which might not always be desirable.

background-position-x and background-position-y options would give users more flexibility in background positioning.

[adamwathan]

Hey @philwolstenholme! Could you expand on what you mean with some examples of actual classes you'd like to see included?

[philwolstenholme]

Hi @adamwathan, so we already have bg-center, bg-top etc thanks to https://tailwindcss.com/docs/background-position, and they map to background-position: center; and background-position: top;.

I ran into a situation where it would be useful to have things like bg-x-center or bg-y-top classes, which would map to background-position-x: center; and background-position-y: top;.

[adamwathan]

bg-top is actually already the same as background-position-x: center; background-position-y: top, because when you only provide a single value (left, right, top, bottom), the other dimension is assumed center by default:

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position#Values

Here's a fiddle demonstrating:

https://jsfiddle.net/adamwathan/kth2pmo5/1/

[philwolstenholme]

That's a very good point! It looks like in the particular case that I encountered I was overthinking it and could just use bg-right. Thanks for the tip :)

[filipesmedeiros]

I think this should be in. It should be easy enough to add, and is nice have the option of just using one of them.

Use case: I want to center the bg horizontally, but need to move it up a bit (not just make it touch the top, but a bit further).

It would also make it consistent with the other x/y properties (left/top, width/height, etc). I can try to tackle it if you want!