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

HTML

Posted by Christopher Beasley
Christopher Beasley
1,493 Points

background images not showing next to link

I am making my own website and I am trying to use the background image but they are not showing up. I have the example of how to use html and it is the same. Trying to see what I am missing.

Code for css:

/****************
  Header
***************/

header{
    background-color:#98afc7;
}

#header-format h1{

        font-family: 'Noto Serif', serif; 
        float: left;
        width: 100%;
        margin: 0;
        padding 0 0 10% 0;
}

#header-format h3{
        font-family: 'Crete Round', serif;
        margin: 0 0 5% 0;
}

/****************
  nav
*****************/

nav {
    background-color:#95b9c7; 
    margin: -15px 0 0 0; 
}

nav li {
    display: inline-block;
    font-size:1.10em; 
    padding-right: 7%;
}

nav li a {
    text-decoration:none;
    color:#616d7e;
    font-weight:800;
}

nav a:visited {
    color:#000; 
}

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

/****************
  Photos
*****************/

img {
    max-width: 100%;
}
/****************
  Body
*****************/
body {
    background-color: #ccc
}

p.paragraph-format {
   font-size:1.25;
   font-weight:700; 
   text-align:left;
   margin: 0 5% 0 5%;
 }

/****************
  footer
*****************/

footer {
    text-align:center;
    padding: 10px; 
}

.social-icon {
  width:25px;
  margin-top:10px;
}

/****************
  contact
*****************/

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

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

Code for contact.html: 

<!DOCTYPE html>
<html>  
  <head>
    <meta charset="utf-8">
      <title>Chris Beasley| Programmer</title>
      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="css/main.css">
      <link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Noto+Serif:400,700italic|Crete+Round' rel='stylesheet' type='text/css'>
    </head>

 <body>
 <header id="header-format">
    <h1> Chris Beasley </h1>
   <h3> App and Front End developer </h3>


    <nav>
      <ul>
          <li><a href="index.html">Bio</a></li>
          <li><a href="mywork.html">Portfolio</a></li>
          <li><a href="Contact.html"class="selected">Contact</a></li> 

       </ul>

    </nav>

    </header>

   <div>
    <section>
      <h3> General Information </h3>
      <p>
         I am not currently looking for new design work right now. I am learning a few new languages. I am only doing speaking engagments, so please feel free to contact me! </p>
        <p> Please only use phone contact for urgent inquiries. Otherwise, Twitter and email are the best way to reach me
      </p>
      </section>    

     <section>
        <h3> Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"> <a href="tel:678-793-6924">678-793-6924></a></li>
          <li class="mail">  <a href="mailto:christopher.beasley1@gmail.com">christopher.beasley1@gmail.com></a></li>
          <li class="twitter"> <a href="http://twitter.com/intent/tweet?screen_name=smartguyhere">@smartguyhere</a></li>

       </ul>


     </section>
   </div>

   <footer>
     <a href="http://twitter.com/smartguyhere"><img src="photos/twitter.png" alt="Twitter Logo"class="social-icon"></a>
     <p> &copy; Chris Beasley 2016</p>
   </footer>
  </body>  
 </html>
Tobiasz Gala
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points

It is really hard to read this code but from what I understand you are trying to add picture your mail class in ul. You should watch Nick's tutorial he has done this and follow all the steps. I think you don't have to call a tag in you declaration.

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

You also need to specify height and display property. Also make sure you folder structure is correct to display image

index.html
css/style.css
img/gmail.png

This is how it should look like

huckleberry
huckleberry
14,636 Points

Code fixed!

@Christoper Beasley In the future, please wrap your code within a set of 3 backticks (the key next to the 1 ... this ` ) with the language following the first 3 backticks. Like so.

```languagename

your code

```

Thanks :)

Cheers,

Huck - :sunglasses:

p.s. you're missing a closing semi-colon in one of your declarations. That's gonna mess up everything after it. Can you find it? ;)

2 Answers

Christopher Beasley
Christopher Beasley
1,493 Points
Christopher Beasley
Christopher Beasley
1,493 Points

huckleberry I fixed the semicolon on the background color but it did not fix the issue. I have looked at the video and my code is identical. I don't know what I am missing.

Tobiasz Gala
seal-mask
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points
Tobiasz Gala
.a{fill-rule:evenodd;}techdegree
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 Points

Usually if image is not displayed it is path related issue. I see you have photos folder in your file structure

<img src="photos/twitter.png">

and you are also calling file in img folder

background-image: url('../img/gmail.png');

make sure if your file structure is correct