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 Evan Hoyt
Evan Hoyt
8,703 Points

I can't get the image to show up on the webpage and when I do, how can I make sure it is at the back?

<head> <div class="div.1"> <title>Evan's Music</title> <link rel="stylesheet" href="style.css"> <h1 class="headline">Evan's Music</h1> <img src="img/pattern_156.gif"> </div> </head>

this is just a copy of the area where I tried to add the image. Am I doing something wrong?

Evan Hoyt
Evan Hoyt
8,703 Points

And something just happened that made it say evan's music...

img src="img/pattern_156.gif"

i took off the brackets so it would show up.

4 Answers

Jonathan Fernandes
Jonathan Fernandes
Courses Plus Student 22,784 Points

Couple of things,

I would take your div and h1 elements and take it out of the head element, since head elements are usually best left to meta data. So, for example, your index.html file should look more like this:

<head> 
  <title>Evan's Music</title>  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="div.1">
    <h1 class="headline">Evan's Music</h1>
  </div>
</body>

With that being said, it should work fine unless your body element isn't "tall" enough yet to capture the image. Try adding a height value to the body element like this:

body {
  background: url('img/bg.gif') no-repeat center center fixed;
  height: 100%;
}

That should do the trick. The only other issue I could see would be the file path to the image.

The gif is named bg.gif and is stored in a folder named img, right?

Evan Hoyt
Evan Hoyt
8,703 Points

I thought it was stored in a file named img. but the whole time I was mistaken and now it works perfectly. Thank you so much for putting up with me. Now my website looks a lot better. Thank you.

Jonathan Fernandes
Jonathan Fernandes
Courses Plus Student 22,784 Points

No worries! I'm just glad I was able to help!

Jonathan Fernandes
PLUS
Jonathan Fernandes
Courses Plus Student 22,784 Points
Jonathan Fernandes
Jonathan Fernandes
Courses Plus Student 22,784 Points

Evan,

I have a sneaky suspicion that you want to use the background CSS property to accomplish what you are looking for. You can create a CSS sheet and add this to it:

body {
  background: url('img/bg.jpg') no-repeat center center fixed;
}

In case you haven't gotten to CSS yet, here is the style tag to make it happen in your html:

<style>
  body {
    background: url('img/bg.jpg') no-repeat center center fixed;
  }
</style>

This basically tells the browser to load your image once, center it and not move the image as you scroll down the page. Try it out and let me know if that is what you were looking for!

Oh and of course, the url path is a fictitious one I made up, just make sure your file path is appropriate to where you have your image stored.

Let me know if this does not make sense and you need me to explain something further or if it simply something else you are looking for. I would be happy to help!

Evan Hoyt
Evan Hoyt
8,703 Points

Thank you for replying. Your suggestions were helpful, but I am still at a standstill. I had tried using css several times to no avail, triple-checked the spelling in css and html, and tried renaming the file just to make it simpler, but none of it worked. I know it cannot be conflicting because of another background that holds 'precedence' over it because I removed all other backgrounds. Previously, I had the icon suggesting there should be an image there, but no image appeared. I made sure I saved it. The image is a .gif, will that make a difference? I doubt it, but I'm just making sure. Does this help?

Jonathan Fernandes
PLUS
Jonathan Fernandes
Courses Plus Student 22,784 Points
Jonathan Fernandes
Jonathan Fernandes
Courses Plus Student 22,784 Points

A gif wouldn't be an issue. I actually just made a prototype website with a gif as the body background.

The next step I would take is looking at how the CSS file is linked, and how your html is set up (to make sure it is getting targeted correctly).

would you mind posting your index.html, your file path to your CSS, and then posting your css file's code as well? I can take a look at it and try to figure out why it isn't working still...

Evan Hoyt
Evan Hoyt
8,703 Points
Evan Hoyt
Evan Hoyt
8,703 Points

Here is my head of my html doc.:

<head> 
   <div class="div.1"> 
  <title>Evan's Music</title>  
  <link rel="stylesheet" href="style.css">
  <h1 class="headline">Evan's Music</h1>
  </div>
</head>

And my css:

body {
   background: url('img/bg.gif') no-repeat center center fixed;
}

Everything else in the CSS file works correctly, along with all of the HTML, it is only this particular aspect that does not work.