Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

haphyz Gbenle
PLUS
haphyz Gbenle
Courses Plus Student 711 Points
Posted by haphyz Gbenle
haphyz Gbenle
Courses Plus Student 711 Points

Adding background size to an element on css

"with the anchor elements inside the contact-info list still selected , set the background size to 20 pixel square. Then set the left padding 30 pixels, with padding at 0."

The quote above is the instruction i've bin asked to carry out in a task.

But i keep getting a bummer asking me if i set the background size of the contact-info link to 20px.

Please look at my code and help me find what i'm doing wrong. I labelled it task 4

Thanks.

css/main.css 
a {
  text-decoration: none;
}

#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%;
}
.contact-info{
  font-size: 0.9em;
  margin:0px;
  padding: 0px;
  list-style: none;
}/**************************
      task 4
**************************/
.contact-info a {
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
}
.contact-info a{
  background-size: 20px;
  padding-left: 30px;
}

3 Answers

Kieran Black
Kieran Black
9,139 Points
Kieran Black
Kieran Black
9,139 Points

Hi Haphyz,

You seem to be setting it to:

min-height: 20px;

I think you need:

background-size: 20px;

Hope that helps KB :octopus:

Russell Sawyer
seal-mask
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points
Russell Sawyer
.a{fill-rule:evenodd;}techdegree
Russell Sawyer
Front End Web Development Techdegree Student 15,705 Points

You're very close. 

.contact-info {  
  font-size: 0.9em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-info a {
  display: block;
  min-height: 20px;
  background: no-repeat;
  background-size: 20px 20px; /*<== the background squared got me the first time too. */
  padding: 0 0 0 30px; /*<== You can also represent padding-left this way*/
}
Tanja Schmidt
Tanja Schmidt
11,798 Points
Tanja Schmidt
Tanja Schmidt
11,798 Points

Hi, you're missing the "square" in 20px square - just add another 20px right after the other. :) Also you should add the last two properties to the selector above, for good practice. 

.contact-info a{
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding-left: 30px;
}

Hope, I could help! Happy Coding!