Skip to content

with the background-position property, where is the 50% position decision? #7982

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
letochagone opened this issue Oct 29, 2022 · 6 comments
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-backgrounds-4

Comments

@letochagone
Copy link

letochagone commented Oct 29, 2022

in the following example an image created with background-image has an even width (4 pixels) .

It is placed in the middle (50%) of the div element containing it. This element has an odd size (9pixels).

result: the image has 3 pixels to its left and 2 to its right.
it could have been 2 pixels to its left and 3 to its right.

My question is not why. My question is where are the documents that specify this type of CSS decision?

image

image

@johannesodland
Copy link

johannesodland commented Oct 29, 2022

Could this be what you’re looking for?

In cases where the used length cannot be supported, user agents must approximate it in the actual value.

https://www.w3.org/TR/css-values-3/#lengths

@letochagone
Copy link
Author

Could this be what you’re looking for?

In cases where the used length cannot be supported, user agents must approximate it in the actual value.

https://www.w3.org/TR/css-values-3/#lengths

this link seems to lead to some interesting stuff. well, now it takes time for me to understand :) thank you anyway

@Loirooriol
Copy link
Contributor

These subpixel things are not currently specified. See #5210 for an attempt to specify how border widths are rounded.

@letochagone
Copy link
Author

These subpixel things are not currently specified. See #5210 for an attempt to specify how border widths are rounded.

but there is no "border" in my problem, it's about the position

@fantasai
Copy link
Collaborator

fantasai commented Nov 2, 2022

@letochagone I think Oriol was just trying to give you an example of where we tried to specify it. But as he mentions, the specifics of pixel rounding aren't specified in the spec, so what the exact effect of the rounding is depends on the layout engine.

@fantasai fantasai added css-backgrounds-4 Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. labels Nov 2, 2022
@johannesodland
Copy link

johannesodland commented Nov 2, 2022

These subpixel things are not currently specified. See #5210 for an attempt to specify how border widths are rounded.

but there is no "border" in my problem, it's about the position

CSS does not specify how to round these subpixel values at the moment.

I will try to go through the computation of background-position in your example, if that helps:

Used values

In your example, you have the following

   background-position: 50% 50%;
   background-size: 4px 6px;
   width: 9px;
   height: 10px;

When background position is specified in percentages, this is calculated as a percentage of the remaining space in the element (width of background positioning area - width of background image). This is specified in CSS Backgrounds and Borders Module Level 3 :

A percentage for the horizontal offset is relative to (width of background positioning area - width of background image). A percentage for the vertical offset is relative to (height of background positioning area - height of background image), where the size of the image is the size given by background-size .

Your remaining horizontal space is 5px. Your remaining vertical space is 4px.
The horizontal offset is then 50% of 5px or 2.5px.
The vertical offset is 50% of 4px or 2px.

This should give the same result as if you had specified:

   background-position: 2.5px 2px;

These are your used values.

Actual values

Your browser (or user agent, as it is called in the specs) might not be able to use these values directly.
It can't render 2.5px if you don't have a screen with a high enough resolution. It has to approximate the used value. This is the actual value.

CSS Cascading and Inheritance specifies the actual values:

A used value is in principle ready to be used, but a user agent may not be able to make use of the value in a given environment. For example, a user agent may only be able to render borders with integer pixel widths and may therefore have to approximate the used width. Also, the font size of an element may need adjustment based on the availability of fonts or the value of the font-size-adjust property. The actual value is the used value after any such adjustments have been made.

The specification has many examples of value computations.

CSS Values and Units also specifies that the browser has to approximate the values.

In cases where the used length cannot be supported, user agents must approximate it in the actual value.

Your question

My question is where are the documents that specify this type of CSS decision?

"The documents" specify that it is up to the browser to round these numbers. I have tried to provide links to where in the documents in the text above.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Closed as Question Answered Used when the issue is more of a question than a problem, and it's been answered. css-backgrounds-4
Projects
None yet
Development

No branches or pull requests

4 participants