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 trialammarkhan
Front End Web Development Techdegree Student 21,661 PointsSetting the background to 20 pixel square not working
I am doing the quiz, and it says "Set the background size to 20 pixel square", and i did but its not working.
.contact-info li a{
display:block;
min-height:20px;
background-repeat:no-repeat;
background-size:20px;
padding:0 0 0 30px;
}
a {
text-decoration: none;
}
ul.contact-info{
font-size:0.9em;
padding:0;
margin:0;
list-style:none;
}
.contact-info li a{
display:block;
min-height:20px;
background-repeat:no-repeat;
background-size:20px;
padding:0 0 0 30px;
}
#wrapper {
max-width: 940px;
margin: 0 auto;
}
#logo {
text-align: center;
margin: 0;
}
h1, h2 {
color: #fff;
}
nav a {
color: #fff;
}
nav a:hover {
color: #32673f;
}
h1 {
font-family: ‘Changa One’, sans-serif;
font-size: 1.75em;
font-weight: normal;
}
img {
max-width: 100%;
}
#gallery {
margin: 0;
padding: 0;
list-style: none;
}
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
}
nav ul {
list-style: none;
margin: 0 10px;
padding: 0;
}
nav li {
display: inline-block;
}
nav a {
font-weight: 800;
padding: 15px 10px;
}
.profile-photo {
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Ammar,
It's 20px square so you have to do background-size: 20px 20px;
ammarkhan
Front End Web Development Techdegree Student 21,661 PointsThanks, but it doesn't say, up and down, left and right?
Isaac Asante
4,752 PointsI forgot how this quiz actually worked, but shouldn't background-size: 20px;
normally apply to all four corners?
Cosmin Cioaclă
21,339 PointsHi Isaac,
This happens when you pass in only one value: One-value syntax: the value defines the width of the image, the height is implicitly set to 'auto'
Jason Anello
Courses Plus Student 94,610 PointsThe first value is for width and the second value is for height. If it's 20px square then it would be 20px for both values because a square has the same width and height.
If you leave off the second value then it defaults to auto
. It would be ok to do this if the native size of your image was a square. The browser will calculate what the height should be in order to maintain original proportions.
Let's say the original image was 60px x 60px.
Then background-size: 20px 20px;
would achieve the same result as background-size: 20px;
The browser will calculate the height to be 20px in the second one in order to maintain the original square proportion.
This challenge wants you to explicitly set both the width and height to 20px to ensure it's a 20px square.
Isaac Asante
4,752 PointsLooks like you forgot to specify the background image through the background-image
attribute, no?
Cosmin Cioaclă
21,339 PointsCosmin Cioaclă
21,339 PointsThe challenge is to set the background-size property to 20 pixels square, not 20 pixels.
Check this resource to see what values you can set for background-size.