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 trial
Ryan Scharfer
Courses Plus Student 12,537 PointsHow do I conceptualize a background-position of 200%?
For the most part I understand background positioning in terms of percentages. I understand for example that the 100% as the second value aligns the bottom border of our image with the bottom border of the jumbotron container. The 200%, on the other hand, is more difficult to understand. I see the image is 1512 pixels wide, so I am guessing the imaginary vertical line 3024 pixels to the right from the left border image is aligned with the imaginary vertical line that is a distance from the left side of the jumbotron container that is double the width of the container?
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsI believe you're correct in your understanding.
I'm referring to horizontal positioning in my answer but the same applies to vertical.
You can think of it as the 200% line on the image will be lined up with the 200% line on the element that it's set on. I don't think you can really make any generalizations for 200% in the same way that you can for 0%, 50%, and 100%. The behavior for those 3 is always the same regardless of image size and element size. 0% - the left edges are aligned, 50% - the centers are aligned, 100% - the right edges are aligned.
At 200%, the position of the background image is entirely dependent on the size of the image and the size of the element.
I did a codepen for you to show 3 different examples and how the background position can be quite different depending on the width of the background image. I decided to keep the div's all the same size (100 x 100) for simplicity. http://codepen.io/anon/pen/wnamF
Example 1
The image is 50x50. If you do the numbers you'll find that the left edge of the image lines up with the right edge of the element. So you wouldn't see it at all in the content area. I put a 50px mostly transparent border on that one so you could see that the background image really is there. So the background image entirely resides in the 50px border.
Example 2
With a 60px wide image you have a portion of the left edge of the image showing up on the right side of the element.
Example 3
At an image width of 170px you can see a portion of the right side of the image on the left side of the container. Opposite behavior of example 2. If you were to increase the left border size on this one you would begin to see more and more of that image as long as the border wasn't fully opaque.
Unfortunately, I can't give you a good answer on how to conceptualize it. For me personally, I would always have to run the numbers to see where it was going to end up.
Ryan Scharfer
Courses Plus Student 12,537 PointsAwesome!! Thanks for the help. That does help me understand the 200% question a little bit better. And it definitely helps me completely understand "nth child", which was still a little new to me. Like you said, the best way to understand is to play with the numbers and see what happens.
Jason Anello
Courses Plus Student 94,610 PointsYou're welcome. Glad it helped you.
As you get more into :nth-child() you'll find it's a lot more powerful than how I used it in the codepen.
Adam Sackfield
Courses Plus Student 19,663 PointsAdam Sackfield
Courses Plus Student 19,663 PointsFire up photoshop start of with an image on 100%, then turn zoom to 200% This is what is happening in CSS