Proposal: `*-position-mode` to control how percentages work in `background-position`, `mask-position`, etc.

[benface]

Problem

Too many times I needed % in background-position and/or mask-position to be a lot simpler than what it actually is, and simply be relative to the element's width (for *-position-x) or height (for *-position-y). Unfortunately, there doesn't seem to be a workaround other than maybe setting a container on a parent element and then using the cqi and cqb units, but that only works when the dimensions of the element we want to set a background or mask on are fixed and known by that container element.

Potential solution

Yet another new unit, or maybe two (e.g. w and h), which could be used in any property that doesn't have an effect on the layout.

See first reply:

[chriskirknielsen]

Oh yes, I could see a use-case for this, but a new unit seems heavy-handed. Perhaps a background-position-mode: relative|absolute (auto and initial could map to relative) property could be easier to implement?

[benface]

Ah yes, that's much better @chriskirknielsen. Updated the title.

[Loirooriol]

Too many times I needed

Can you provide some examples?

There is also https://drafts.csswg.org/css-images/#the-object-position

[benface]

@Loirooriol – Here is one example: https://codepen.io/benface/pen/LEGQyjg