Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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:

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

Thanks.

@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