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 How to Make a Website Adding Pages to a Website Add and Style Icons

Posted by ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

Setting 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;

}
css/main.css 
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%;
}
Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points
Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points

The 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.

2 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Ammar,

It's 20px square so you have to do background-size: 20px 20px;

ammarkhan
.a{fill-rule:evenodd;}techdegree
ammarkhan
Front End Web Development Techdegree Student 21,661 Points

Thanks, but it doesn't say, up and down, left and right?

Isaac Asante
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

I forgot how this quiz actually worked, but shouldn't background-size: 20px; normally apply to all four corners?

Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points
Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points

Hi 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
Jason Anello
Courses Plus Student 94,610 Points

The 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
Isaac Asante
4,752 Points
Isaac Asante
Isaac Asante
4,752 Points

Looks like you forgot to specify the background image through the background-image attribute, no?