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

Posted by Douglas Dunn
Douglas Dunn
8,937 Points

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

jcorum
jcorum
71,814 Points

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

6 Answers

Douglas Dunn
Douglas Dunn
8,937 Points
Douglas Dunn
Douglas Dunn
8,937 Points

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

jcorum
jcorum
71,814 Points
jcorum
jcorum
71,814 Points

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.

Douglas Dunn
Douglas Dunn
8,937 Points
Douglas Dunn
Douglas Dunn
8,937 Points

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

jcorum
jcorum
71,814 Points

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.

Douglas Dunn
Douglas Dunn
8,937 Points
Douglas Dunn
Douglas Dunn
8,937 Points

@jcorum Yup! It looks exactly like that

jcorum
jcorum
71,814 Points

Could you give me the "full path name"?

Douglas Dunn
Douglas Dunn
8,937 Points
Douglas Dunn
Douglas Dunn
8,937 Points

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

jcorum
jcorum
71,814 Points
jcorum
jcorum
71,814 Points

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.

Douglas Dunn
Douglas Dunn
8,937 Points

@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