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 trialGina Bégin
Courses Plus Student 8,613 PointsWhy 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
Micah Cooksey
7,151 PointsHi 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
Micah Cooksey
7,151 PointsNo problem. Happy learning!
Gina Bégin
Courses Plus Student 8,613 PointsThanks so much for the input and knowledge, Micah Cooksey! Much appreciated. :)
Gina Bégin
Courses Plus Student 8,613 PointsGina Bégin
Courses Plus Student 8,613 PointsIs that only true for background-size and not other elements?
Micah Cooksey
7,151 PointsMicah Cooksey
7,151 PointsIn 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 thebackground
element if you want to shorten things. More info here.