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 kiran siddiqi
kiran siddiqi
992 Points

Please help why i can't see the header img?

My code is correct PLease help me see what am i doing wrong. Thanks.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Precision Hydro Tools</title>
  <link rel="stylesheet" href="css/main.css">



  </head>
  <body>
    <div id="wrapper">
    <div id="logo"><a href="index.html"><img src="images/logo.gif"></a></div><!----logo--->
      <div id="nav"><a href="home.html">Home |</a>
      <a href="products.html">Products |</a>
      <a href="contact.html">Contact</a></div><!----nav-->
      <div id="header"></div> <!------header--->   





    </div><!-----wrapper--->



  <header>


    <nav></nav>
    </header>

  </body>





</html>```


```css
body {
background-color:#000025;
  background-image:url(images/bg.jpg);
  background-repeat:repeat-x;
}
#wrapper {
  width: 940px;
  height:100px;
  background-color:#f7f7f7;
  margin-left:auto;
  margin-right:auto;
  border-right:1px, #999999;
  border-left:1px,#999999;
}
#wrapper #logo {
height:84px;
}

#wrapper #nav{
  height:35px;
  background-color:teal;


}
#wrapper #header{
  height:250px;
  background-image:url(images/header.jpg);
  background-repeat:no-repeat;



}```

3 Answers

Jeff Lemay
Jeff Lemay
14,268 Points

You are missing quotes around the url path.

Also, is your stylesheet/css located inside a css folder? Your path to the background image might be off. When you make the call, you'll want to come out of the css folder before going into the images folder.

#wrapper #header{
  height:250px;
  background-image:url('../images/header.jpg');
  background-repeat:no-repeat;
}
Ryan Field
Ryan Field
Courses Plus Student 21,242 Points

To be clear, quotes are not necessary for url(../your/url/image.jpg) unless there is a space in the URL itself (which should be avoided, if possible). That said, I've made this mistake (not properly going up a folder to the image) so many times myself that it is immediately the first thing I check now when an image in CSS isn't showing. XD

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

First a comment on Markdown. The ending three ` go on their own line.

Look carefully at the path to your image. The image folder is usually called img not image.

Your HTML is not configured right. The header element should be inside your wrapper div and surround your nav links.

You would be well served if you work on the formatting of your html code for readability. There is an indent standard that I think everyone uses that makes it much easier to understand what is going on. I quickly learned that I had less problems when I followed that standard because everything was more clear.

edit: To add to Jeff, you will have two images because you call two different id tags for the code he is referring to. You have an id=header and the html element header. I am not sure if that is valid, but I think that is a very confusing practice. I always stay away from an id that is the same as an html element name because it is too easy to get mixed up.

kiran siddiqi
kiran siddiqi
992 Points

Thanks :)

kiran siddiqi
kiran siddiqi
992 Points
kiran siddiqi
kiran siddiqi
992 Points

Thank You So much. it was the path of the url i had wrong. Also fixed my code how it looks. I appreciate your help. :)