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 CSS Basics (2014) Basic Layout Basic Layout Review

Not totally understanding the question.

shouldn't the question ask "if we specify horizontal background-position" instead of "if we specify one background-position"? because if I specify the y axis, which is vertical, as 20%, then that would mean the vertically it would be 20%. Or can somebody rephrase this question? Maybe I'm not getting the message right.

3 Answers

Brendon Butler
Brendon Butler
4,254 Points

With the background-position property you are able to set X&Y/relative/inherited/original positions. The tutorial might have only shown how to position the background on the y axis, but this property allows much more than that.

Feel free to read up about the CSS background-position property: here

Hopefully this helps, if not please leave a comment so hopefully I can try to clear things up a bit better :)

Sebastian Astill
Sebastian Astill
3,629 Points

If the background-position value is 20% then we have the following rule

element {
  background-position: 20%
}

This sets the horizontal position to 20% from the left but the vertical value is automatically set to 50%, the same as if we had written

element {
  background-position: 20% 50%;
}

Basically, if you set a single value for background-position you are setting the horizontal position and the vertical position is 50% by default.

Sebastian Astill
Sebastian Astill
3,629 Points

I see you already resolved it, I'm glad but I'll leave this here anyway. :)

This is actually perfect! haha thanks.

It helps, thanks. That link had the sentence "If you only specify one keyword, the other value will be center", which is the rephrasing I was looking for. The question in the quiz said something along the lines of "If you only specify one keyword, the vertical value will be center".

Thanks for the help. The clarification was much needed.

As I hit add comment I realized why the question may have been phrased that way. I guess its because when setting a position the first value will be horizontal while the second will be vertical. So no matter what, if you only input one value you will always be assigning the position for horizontal and if not specified, vertical will follow the same position.

haha I don't know but the way it was explained on w3s was easier to understand.