Hi,

If you are using a background image for the header, you don't need to touch your html file, simply replace it in your css file with the new code:

header {
width: 1000px;
margin: 0 auto;
height: 115px;
background: url(images/img01.jpg) no-repeat left top;
}

Hope this helps.

hmmm... that is exactly what I did but nothing is happening. Here is my code in main.css....

header { width: 1000px; margin: 0 auto; height: 115px; background: url(img/img01.jpg) no-repeat left top; } Here is my index.html.... <header> <a href="index.html" id="logo"> <h1>2014 Homecoming</h1>

If your css file is in a separate folder and not in the root of the site then you will need to use a relative path to the image.

For example:

• style.css is located in the css/ folder
• img01.jpg is located in the img/ folder
• index.html is located in the root of the site.

The rule will look like:

header { width: 1000px; margin: 0 auto; height: 115px; background: url('../img/img01.jpg') no-repeat left top; }

All the folders are located in the root folder as follows: CSS img about.html contact.html index.html Thanks

I changed it to.....background-image: url('../img/img01.jpg'); also tried background-image: url{../img/img01.jpg) Still no go.

In your previous message you refer to your images folder in the root folder as img, however in your css your referencing it as images, could that be it?

if not is it a live site you can post a link to?

That was a mistake. It should read img/img01.jpg. It is not live. I am trying to create a new page with what I have learned. Just can't get the image to work. I know it is something simple but I am not seeing it

Here is my index.html....

<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/Homecoming Flyer_2014.jpg"> <img src="img/Homecoming Flyer_2014.jpg" alt=""> <p>Homecoming Booth Flyer.</p> </a> </li> <li> <a href="img/Homecoming Flyer_2014.jpg"> <img src="img/Homecoming Flyer_2014.jpg" alt=""> <p>Homecoming Golf Classic.</p> </a> </li> <li> <a href="img/Homecoming Flyer_2014.jpg"> <img src="img/Homecoming Flyer_2014.jpg" alt=""> <p>Homecoming Schedule.</p> </a> </li> <li> <a href="img/Homecoming Flyer_2014.jpg"> <img src="img/Homecoming Flyer_2014.jpg" alt=""> <p>Homecoming Registeration.</p> </a> </li> <li> <a href="img/Homecoming Flyer_2014.jpg"> <img src="img/Homecoming Flyer_2014.jpg" alt=""> <p>Homecoming Pre-Registeration</p> </a> </li> <li> <a href="img/Homecoming Flyer_2014.jpg"> <img src="img/Homecoming Flyer_2014.jpg" alt=""> <p>Queen Day Flyer</p> </a> </li> </ul> </section> <footer> <a href="http://twitter.com/encsd"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a> <a href="http://facebook.com/encsd"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a> <p>© 2014 ENCSD.</p> </footer> </div> </body> </html>

Here is my main.css... /********************************** 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 { width: 1000px; margin: 0 auto; height: 115px; background-image: url('../img/img01.jpg'); }

h1 { font-family: 'Changa One', 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; }

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

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

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

.social-icon { width: 20px; height: 20px; margin: 0 5px; }

/********************************** 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: 2em; 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 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'); }

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

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

/* green header */ header { background: #6ab47b; border-color: #599a68; }

/* nav background on mobile */ nav { background: #599a68; }

/* 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; }

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Homecoming 2014</title> <link rel="stylesheet" href="css/normalize.css"> <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <header> <a href="index.html" id="logo"> <h1>2014 Homecoming</h1>

    </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/Homecoming Flyer_2014.jpg">
          <img src="img/Homecoming Flyer_2014.jpg" alt="">
          <p>Homecoming Booth Flyer.</p>
        </a>
      </li>
      <li>
        <a href="img/Homecoming Flyer_2014.jpg">
          <img src="img/Homecoming Flyer_2014.jpg" alt="">
          <p>Homecoming Golf Classic.</p>
        </a>
      </li>
      <li>
        <a href="img/Homecoming Flyer_2014.jpg">
          <img src="img/Homecoming Flyer_2014.jpg" alt="">
          <p>Homecoming Schedule.</p>
        </a>
      </li>
      <li>
        <a href="img/Homecoming Flyer_2014.jpg">
          <img src="img/Homecoming Flyer_2014.jpg" alt="">
          <p>Homecoming Registeration.</p>
        </a>
      </li>
      <li>
        <a href="img/Homecoming Flyer_2014.jpg">
          <img src="img/Homecoming Flyer_2014.jpg" alt="">
          <p>Homecoming Pre-Registeration</p>
        </a>
      </li>
       <li>
        <a href="img/Homecoming Flyer_2014.jpg">
          <img src="img/Homecoming Flyer_2014.jpg" alt="">
          <p>Queen Day Flyer</p>
        </a>
      </li>
    </ul>
  </section>
  <footer>
    <a href="http://twitter.com/encsd"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
    <a href="http://facebook.com/encsd"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
    <p>&copy; 2014 ENCSD.</p>
  </footer>
</div>

</body> </html>

Ok I think I might have found what is wrong. In your css, where you have the colors section, you have the following line ```css /* green header */ header { background: #6ab47b; border-color: #599a68; }

You have only commented out the /* green header */ so because of the cascade this header ... is overriding your styles set further up the document. If you either comment out the green header line completely or combine it with your header styles yiu should see your image

Thanks! That resolved the image not displaying... However, <h1>2014 Homecoming</h1> displays over the image. 1. how can I move the <h1>2014 Homecoming</h1> further down so it does not overwrite my image. You said I could "combine" it with my heard. Any suggestions? 2. I noticed my my gallery is working as they are shrinking and expanding with the page but the image does not.

Glad I could help.

Where in your html is 2014 Homecoming? I'm not seeing it.

Point 2, header image not resizing, it's because you've set it's width to be 1000px, same with the height it's set in px

I had removed it. The "Homecoming 2014", "Portfolio" , "about" , and "contact are appearing on top of the image.

<body> <header> <a href="index.html" id="logo"> <h2>Homecoming 2014</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>

Ok, so I'm assuming that you have kept the same markup as in the "How to make a website" html file.

2014 Homecoming is the equivalent to the logo, the others are your nav links. They are appearing on top of the image because all those elements form the header and you have set a background image for the header.

You can either move the element outside of the header section, if that is semantically appropriate, or use positioning to place it where you like.

For the header background image, check what you have in the css for your wrapper, see how you've set the width? Using max-width means things can get narrower but never wider than the set dimension.