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.

CSS

Andrew Booth
Andrew Booth
1,578 Points

Why is 'mail.png' not displaying?

Here is my code:

/**************************************     
               General Styling
****************************************/
h3 {
margin: 0 0 1em 0;
}

nav li {
display: inline-block;
}





/* ************************/
/***********     
    Body
************/
body {
font-family: 'Open sans', sans-serif;
}  
      body {
text-align: center;
  padding: 10px 0;
  margin: 20px 0 0;
}
      body, p {
      background-color: white;
        color: #999 }
/* *************/

/***********     
 Text/fonts
************/
a {text-decoration: none; }
                h1 {font-family: 'Courgette', sans-serif;
margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}
h2 {
font-family: 'Courgette', sans-serif;
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}     
#gallery p {
background-color: gray;
}
 h1, h2 {
        color: #202020;         
      }
/* *********************/

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

              img {
max-width: 100%;
}


         ul {
      list-style: none;
      }
      /*  Aligns text  */
      #logo {
      text-align: center;
      margin: 0;

      }




      a { color: #fff; 

      } 


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

#discord {
width: 45px;
  height: 45px;
  margin: 0 5px;
}

/***********     
  Gallery ID
************/

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

#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
}


/* *******************/


/**************************************     
               About Page
****************************************/
.nick {
display: block;
  max-width: 150px;
  margin: 0 auto 30px;
border-radius: 100%;
}




/* **************************************/

 /***********     
     Nav
************/
      nav {background: #808080;}
      nav a, a:visited {color: #fff; }


      nav a.selected, nav a:hover {
      color: #000;
      }

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

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

/******************** */

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

 header {
      background: #CCE5FF;
        border-color: #599a68;
      }


/**************************************     
             Contact Me Page
****************************************/
.mailc a {
color: #808080;  
}

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


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


/* ***************************************/

I already tried using the dots but they did nothing.

2 Answers

Robert Stefanic
Robert Stefanic
35,157 Points

Try making it either:

background-image: url('./img/mail.png');
/* OR */
background-image: url('/img/mail.png');
mouseandweb
mouseandweb
13,743 Points

/*Have you tried entering something like the code below?/

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

/* NOTE THAT YOU HAVE THE LETTER c FOLLOWING YOUR li.mail, WAS THIS A TYPO?/ /*This is a bit of code from my own site where I used the mail png./

Andrew Booth
Andrew Booth
1,578 Points

It was not a typo, I had a reason for adding a c.