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

HTML How to Make a Website Adding Pages to a Website Add and Style Icons

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points

Why when asked to create a "background size to 20 pixels square" do you need 2 sets of "20px" & not just one?

I thought that in shortcode, if you wanted all the sizes to be the same on all four sides of an element, you set the first value, and that would count for top, right, bottom, and left sizes. In the quiz, though, you have to specify both the top and bottom to 20px and the left and right as 20px. So instead of just the shorthand " background-size: 20px; " you have to say " background-size: 20px 20px; "

They're the same, so why two of them? I could see if you needed two different sizes (20px for top and bottom and 40px for left and right) or needed just the left and right to be 20px (" 0 20px; ") but I thought the first number would carry across all values if no others were specified, thus making the element square.

3 Answers

Hi Gina,

If you only specify one value, e.g. 20px, for background-size, that will only affect the width, and the height will be set to auto.

More info on background-size

Gina Bégin
Gina Bégin
Courses Plus Student 8,613 Points

Is that only true for background-size and not other elements?

In almost every other case, e.g. margin, border, padding, etc., you're fine with using shorthand like you described in your initial post.

For background-size, you're best off combining values into the background element if you want to shorten things. More info here.

No problem. Happy learning!

Gina Bégin
PLUS
Gina Bégin
Courses Plus Student 8,613 Points

Thanks so much for the input and knowledge, Micah Cooksey! Much appreciated. :)