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!
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
Ivy Kou
Courses Plus Student 2,859 PointsBackground-repeat:no-repeat is not working
I tried the code up to this stage, the background repeat: no-repeat is not working.
I tried disabling each line and it just doesn't take the background-repeat line and I don't understand why. Please help.
Here is my code:
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 30px 0;
margin: 0 0 10px;
}
Ivy Kou
Courses Plus Student 2,859 PointsMany thanks for your speeding response!
I am actually following the video of Nick's tutorial. It is adding icons for the contact info. The background image is at the codes below.
Here are the codes:
/**************** PAGE: CONTACT *****************/
.contact-info { list-style: none; margin: 0; padding: 0; font-size: 0.9em; }
.contact-info li.contact-phone { background: url('../img/phone.png');
}
.contact-info li.contact-mail { background-image: url('../img/mail.png');
}
.contact-info li.contact-facebook { background-image: url('../img/twitter.png');
}
.contact-info a {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 30px 0;
margin: 0 0 10px;
}
Ivy Kou
Courses Plus Student 2,859 PointsHi Andrew,
I tried, the no repeat works on two of them ( mail and facebook), not all. but the other syntax doesn't seem to apply now, such as the margin and padding.
/**************** PAGE: CONTACT *****************/
.contact-info { list-style: none; margin: 0; padding: 0; font-size: 0.9em; }
.contact-info li {
display: block;
min-height: 20px;
background-repeat: no-repeat;
background-size: 20px 20px;
padding: 0 0 30px 0;
margin: 0 0 10px;
}
.contact-info li.phone { background: url('../img/phone.png');
}
.contact-info li.mail { background-image: url('../img/mail.png');
}
.contact-info li.facebook { background-image: url('../img/twitter.png');
}
3 Answers
Andrew Trigg
17,485 PointsIf you change .contact-info a to .contact-info li it should work.
Ivy Kou
Courses Plus Student 2,859 PointsI have found out the reason why it doesn't apply to the phone icon now, I typed "background" only instead of "background-image"..... now just the margin and padding left.
Ivy Kou
Courses Plus Student 2,859 PointsIt all works now!! Thanks for your time Andrew!
Andrew Trigg
17,485 PointsNo problem, glad you got it working
Andrew Trigg
17,485 PointsAndrew Trigg
17,485 PointsWhat background are you using? No background is declared in the above code.