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

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,830 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,830 Points
jcorum
jcorum
71,830 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,830 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,830 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,830 Points
jcorum
jcorum
71,830 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