Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialAnne Liu
657 PointsWhat happened when set 'background-position: 20% 50%; '?
when he said the image is set to the left 20% and centred 50%. I did not really get it. Assume the image ha x px high, the background is y px high. Is 50% means the image start from the 50y px or else?
3 Answers
Anne Liu
657 Pointsthanks 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.
Jason Anello
Courses Plus Student 94,610 PointsHi 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.
Afrid Mondal
6,255 PointsHi, 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.