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

Posted by Corey Smith
Corey Smith
3,520 Points

Background-repeat: no-repeat; not working

Well I've copied the code directly from the video and my background image continues to repeat. I've pasted the code below.

/******************* PAGE: CONTACT ********************/

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

.contact-info a { display: block; min-height: 20px; background-repeat: no-repeat; background-size: 20px 20px; /* padding: 0 0 0 30px;*/ margin: 0 0 10px; }

.contact-info li.phone { background-image: url('../img/phone.png'); }

.contact-info li.mail { background-image: url('../img/mail.png'); }

.contact-info li.twitter { background-image: url('../img/twitter.png'); }

eck
eck
43,038 Points

Hey Corey, can we also see your HTML to get a better idea of what the best solution is?

Amandeep Dindral
Amandeep Dindral
8,915 Points

Hi Cory,

Do you mind posting the HTML and CSS in a screenshot? You can click the "Markdown Cheatsheet" and it shows you how to do this.

vishal fulwani
vishal fulwani
7,573 Points

Add "a" After " phone, mail, twitter because you are targeting archer aliment of li ok. Its look like:

.contact-info li.phone a { background-image: url('../img/phone.png'); }

.contact-info li.mail a { background-image: url('../img/mail.png'); }

.contact-info li.twitter a { background-image: url('../img/twitter.png'); }

7 Answers

eck
eck
43,038 Points

Okay, so I think that this last thing should fix your problem. Instead of this CSS:

.contact-info a {
 display: block;
 min-height: 20px;
 background-repeat: no-repeat;
 background-size: 20px 20px;
/* padding: 0 0 0 30px;*/
 margin: 0 0 10px;
}

Use this CSS:

.contact-info li {
 display: block;
 min-height: 20px;
 background-repeat: no-repeat;
 background-size: 20px 20px;
/* padding: 0 0 0 30px;*/
 margin: 0 0 10px;
}

Basically you were targeting the wrong element with background-repeat: no-repeat; so instead of targeting the anchor I targeted the list items, which are the ones with the background images.

Corey Smith
Corey Smith
3,520 Points

darn, that didn't work. I actually thought the same thing at first.The images are nested in the li but the code from the video is the exact same as mine. He has this background-repeat under .contact-info a. The only thing I can think of really is how the video tells me to type ".." before i paste the link for my images.

ex: "../img/phone.png"

He tells me to do this because we need to go "up" to the main folder of "How to make a website". The video's about.html file is above the folders while mine is below.

ex: my file tree How to make a website -css --main.css --normalize.css -img --about.html --contact.html --index.html

ex: video's file tree How to make a website --about.html --contact.html -css --main.css --normalize.css -img --index.html

Basically his html files are above the folders, while mine is beneath. You think this could affect my result?

Corey Smith
Corey Smith
3,520 Points
Corey Smith
Corey Smith
3,520 Points

'''html

<html> <head> <meta charset="utf-8"> <title>Corey Cache | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href='https://fonts.googleapis.com/css?family=Orbitron|Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Corey Cache</h1> <h2>Designer</h2> </a> <nav> <ul> <li><a href="index.html" class="selected">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section> <ul id="gallery"> <li> <a href-"img/numbers-01.jpg"> <img src="img/numbers-01.jpg" alt=""> <p>Experimentation with color and texture.</p> </a> </li> <li> <a href-"img/numbers-02.jpg"> <img src="img/numbers-02.jpg" alt=""> <p>Playing with blending modes in Photoshop.</p> </a> </li> <li> <a href-"img/numbers-06.jpg"> <img src="img/numbers-06.jpg" alt=""> <p>Trying to create an 80's style of glows</p> </a> </li> <li> <a href-"img/numbers-09.jpg"> <img src="img/numbers-09.jpg" alt=""> <p>Drips created using Photoshop brushes</p> </a> </li> <li> <a href-"img/numbers-12.jpg"> <img src="img/numbers-12.jpg" alt=""> <p>Creating shapes using repetition.</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/coreycache"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a> <a href="http://www.facebook.com/CoreyCache"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a> <p>© 2015 Corey Cache.</p> </footer> </div> </body> </html> '''

Corey Smith
Corey Smith
3,520 Points
Corey Smith
Corey Smith
3,520 Points 
/*******************
GENERAL
********************/

body {
 font-family: "Open Sans', sans-serif; 
}

#wrapper {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 5%;
}

a {
  text-decoration:none;
}

img {
 max-width: 100%;
}

h3 {
 margin: 0 0 1em 0;
}


/*******************
HEADING
********************/

header {
 float: left;
 margin: 0 0 30px 0;
 padding: 5px 0 0 0;
 width: 100%;
}

#logo {
  text-align: center;
  margin: 0;
}

h1 {
 font-family: 'Orbitron', sans-serif;
 margin: 15px 0;
 font-size: 1.75em;
 font-weight: normal;
 line-height: 0.8em;
}

h2 {
 font-size: 0.75em;
 margin: -5px 0 0;
 font-weight: normal;
}



/***************************
 NAVIGATION
***************************/

NAV {
 text-align: center;
 padding: 10px 0;
 margin: 20px 0 0; 
}

nav ul {
 list-style: none;
 margin: 0 10px;
 padding: 0;
}

nav li {
 display: inline-block;
 margin: 5px;
}

nav a {
 font-weight: 800;
 padding: 15px 10px;
}



/***************************
 FOOTER
***************************/

footer {
 font-size: 0.75em;
 text-align: center;
 clear: both;
 padding-top: 50px;
 color: #ccc;
}



/*******************
PAGE PORTFOLIO
********************/

#gallery {
 margin: 0;
 padding: 0;
 list-style: none;
 }

#gallery li {
 float: left;
 width: 45%;
 margin: 2.5%;
 background-color: #f5f5f5;
 color: #bdc3c7;
}

#gallery li a p {
 margin: 0;
 padding: 5%;
 font-size: 0.75em;
 color: #bdc3c7;
}



/*******************
PAGE: ABOUT
********************/

.profile-photo {
 display: block;
 max-width: 150px;
 margin: 0 auto 30px;
 border-radius: 100%;
}



/*******************
PAGE: CONTACT
********************/

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

.contact-info a {
 display: block;
 min-height: 20px;
 background-repeat: no-repeat;
 background-size: 20px 20px;
/* padding: 0 0 0 30px;*/
 margin: 0 0 10px;
}

.contact-info li.phone {
 background-image: url('../img/phone.png');
}

.contact-info li.mail {
 background-image: url('../img/mail.png');
}

.contact-info li.twitter {
 background-image: url('../img/twitter.png');
}

/*******************
COLORS
********************/

/* site body */
body {
 background-color: #fff;
 color: #999;
}

/* brown header */
header {
  background: #684333;
  border-color: #BFAE8C;
}

/* nav background on mobile */
nav {
  background: #BFAE8C
}

/* logo text */
h1, h2 {
  color: #fff;
}

/* links */
a {
  color: #6ab47b;
}

/* nav link */
nav a, nav a:visited {
  color: #fff;
}

/* selected nav link*/
nav a.selected, nav a:hover {
  color: #32673f;
}
eck
eck
43,038 Points

I deleted your duplicate post of your CSS. Also, you did not quite get the Markdown right. You used three single quotes instead of 3 backticks. Google "backtick key" to help you find it on your keyboard.

Corey Smith
Corey Smith
3,520 Points
Corey Smith
Corey Smith
3,520 Points

Thanks, i believe that backtick error is corrected now. The code should be above.

eck
eck
43,038 Points
eck
eck
43,038 Points

Okay, so there are a few mistakes that I can see. Some might not be related to your issue with repeating background images but I will share them with you anyway :P

  1. You have used "-" instead of "=" when giving href values to some of your anchor links. Below is one example of this, but you have several in your HTML.
<a href-"img/numbers-01.jpg">
  <img src="img/numbers-01.jpg" alt="">
  <p>Experimentation with color and texture.</p>
</a>
Corey Smith
Corey Smith
3,520 Points

ahhh DETAILS! THANK YOU. I fixed that. But i also realized i gave you the index.html code and not contact.html

here is the correct code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Corey Cache | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='https://fonts.googleapis.com/css?family=Orbitron|Open+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Corey Cache</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selected">About</a></li>
          <li><a href="contact.html">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section>
      <h3>General Information</h3>
       <p>If you need to contact me, fill out the form.</p>
       <p>Please only use phone contact for urgent inquiries</p>
      </section>   

      <section>
       <h3>Contact Details</h3>
       <ul class="contact-info">
        <li class="phone"><a href="tel:404-671-6047">404-771-6047</a></li>
        <li class="mail"><a href="mailto:coreycache@gmail.com">coreycache@gmail.com</a></li>
        <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=coreycache">@CoreyCache</a></li>

       </ul>
      </section>
      <footer>
        <a href="http://twitter.com/coreycache"><img src="img/twitter-wrap.png" alt="Twitter Logo"></a>
        <a href="http://www.facebook.com/CoreyCache"><img src="img/facebook-wrap.png" alt="Facebook Logo"></a>
        <p>&copy; 2015 Corey Cache.</p>
        </footer>
      </div>
    </body>
</html>
Amandeep Dindral
Amandeep Dindral
8,915 Points
Amandeep Dindral
Amandeep Dindral
8,915 Points

Also you are missing in your html

<html></html>
Corey Smith
Corey Smith
3,520 Points

user error when i pasted the code! thanks though! i've pasted the correct code above. you guys are awesome

eck
eck
43,038 Points
eck
eck
43,038 Points

2 You have used a double quote and tried to close it with a single quote in your CSS. I think this is actually disrupting a portion of your CSS and might be why it is not working.

body {
 font-family: "Open Sans', sans-serif;    /* use "Open Sans" instead of "Open Sans' */
}
Corey Smith
Corey Smith
3,520 Points

Thanks Erik. I found what I did

I had this

 .contact-info li.phone {
 background-image: url('../img/phone.png');
}

but needed this

 .contact-info li.phone a {
 background-image: url('../img/phone.png');
}
eck
eck
43,038 Points

That would do it :P

Nice job identifying where you went off track!