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

CSS Unused CSS Stages CSS Animations Full-Page Animation Project: Part 2

Picking Values for BG Position

How did you come up with the values of 100% and -350% and -560px and -460px in this case. Would this change according to the dimensions of the image and how do we pick these values for generic images? Is it through trial and error.

1 Answer

Lucas Santos
Lucas Santos
19,315 Points

Trail and Error is one way to go about it but most people including myself do it through the process of calculation. Think about it if there was a box (div) 500 x 500 and inside there was an image that was just 400px of width centered in the middle then you know that where would be 50px of extra space to the left and right of that image. So then I decided to move the 400px wide image to the left 50px then it would be aligned to the left of the box. I keep moving it to the left another 100px then only 300px of that image will now show from the left of the box and so forth. It's a pretty simple concept to understand when you get it just calculations based on width and height. ALSO this is assuming you have no padding, margin, or borders because then that would also need to be including into the equation.