What happened when set 'background-position: 20% 50%; '?

thanks Afrid. But if the element is placed vertically 50% apart from the top side. means the top border(could be none) starts at the 50% of the parent container vertically. how the element could be centred? It should be placed at the beginning of the bottom half of the container vertically.

Hi Anne,

Here's a way that you can conceptualize it.

For the 20% horizontal offset, imagine that you've drawn a vertical line through the image 20% from the left edge. If the image was 100px wide then this vertical line would be 20px from the left edge.

Now do the same thing for the background area of the element. If the element was 1000px wide then the vertical line would be 200px from the left edge of the background area.

The image is then placed horizontally so that both 20% lines coincide with each other.

In other words, the 20th px across the image is lined up with the 200th px across the element.

That would put the left edge of the image 180px from the left edge of the background area.

The css specification for background-position contains a diagram that I think illustrates it better than I can explain. Take a look at example 9 from section 3.6

https://www.w3.org/TR/css3-background/#the-background-position

I had arrived at the 180px indirectly based on how to conceptualize it. The 180px can be calculated more directly based off the formula given in the percentage definition for background-position.

From the link above, "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’. "

Using the calculation for horizontal offset we would have 1000px - 100px = 900px

20% of 900px is 180px

This calculation is simply a more direct way for the browser to calculate where the left position of the image needs to be.

I think the diagram is a convenient way for us to think about it but the browser is not going to figure it out like that.

Hi, Anne.....the first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. So, in this case 20 % means the position of the image is placed apart from left side relative to it's parent container element and 50% means the position of the image is placed apart from top side relative to it's parent container element.