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!

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


I'm trying to set the background image but the background does not show up

body { background-image: url("img/background.jpg"); }

This is what I'm trying but it's not working

Did you check to see if there is a background.jpg in the img folder?

6 Answers

@jcorum Yeah. I have two images in that folder that I tried to set but it doesn't show up in the background

Well, if there's an img folder, and it's at the same level as your html file, and it contains a background.jpg file then it gets interesting!

Have you tried clearing your cache? Some browsers are a bit negligent about considering css and some html changes as changes, so they keep serving up old pages.

In Google Chrome there's a checkbox under Network in Developer Tools.

@jcorum I'm not sure what's going on but when I put the full path name, it worked! Thanks anyway for helping!

The problem is that later on you will want to use relative addressing for images. Could you check and see if your directory and file structure looks like this:

   normalize.css  //yours may have different names
   other images
index.html   //assuming the html is in a file named index


@jcorum Yup! It looks exactly like that

Could you give me the "full path name"?

background-image: url("C:/Users/DJ/Documents/Websites/linkProgram/img/monkey.png");

At the beginning you had

body { background-image: url("img/background.jpg"); }

I take it you changed the image, as you now have:

background-image: url("C:/Users/DJ/Documents/Websites/linkProgram/img/monkey.png");

So, if that's the case, then this should also work:

body { background-image: url("img/monkey.jpg"); }

As I say, there will be many times you will need relative addressing, rather than absolute, so it's important to get this to work. Here I'm assuming that monkey.jpg is in the img folder.

@jcorum I finally figured it out! its url('../img/monkey.jpg'); The two dots .. is to jump out of the css directory then /img is to go into the img directory, then /monkey.jpg is my background pic. Thanks to my linux class, I understood how to do it