Background Position vs Background Size

[danspratling]

Hey. I've just run into a (small) problem with the background position vs background size properties.

I'll phrase this as a question.

What would you expect bg-[200%] to do?

Based on the docs, it looks like this could be one of two answers

// either
background-size: 200%;
//or
background-position: 200%;

The actual answer is that background position seems to be picked first if a % is used, while arguably size is more likely for a % over 100. Because both of these are technically valid there is potential for confusion.

So if you want to do effectively bg-size-[200%] there doesn't appear to be a means to allow this, despite technically supporting the option.

If there is a supported method for implementing both bg size and position as a percent at the same time, I'd love to see an example added to both the page and the arbitrary values docs.

[wongjn]

With regards to ambigious nature of the bg- prefix, you could consider "typing" the arbitrary value¹².

For background-position, set the typing as position:

tailwindcss/src/corePlugins.js

Lines 1905 to 1907 in 4c34b2e

	backgroundPosition: createUtilityPlugin('backgroundPosition', [['bg', ['background-position']]], {
	type: ['lookup', ['position', { preferOnConflict: true }]],
	}),

Also of note that preferOnConflict is set to true, so background-position will be chosen for an ambigious value that could be for background-position or background-size.

Or for background-size, set the typing as length, percentage or size:

tailwindcss/src/corePlugins.js

Lines 1884 to 1886 in 4c34b2e

	backgroundSize: createUtilityPlugin('backgroundSize', [['bg', ['background-size']]], {
	type: ['lookup', 'length', 'percentage', 'size'],
	}),

If you would like to contribute to the documentation, feel free to send a pull request to the documentation website repository.

Footnotes

1. https://tailwindcss.com/docs/background-size#arbitrary-values ↩

2. https://tailwindcss.com/docs/adding-custom-styles#resolving-ambiguities ↩

[leetcow]

just ran into this today after trying to set background size with bg-[100%_2px] and the position being set instead