Bummer! You must be logged in to access this page.

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

CSS

Posted by J Donahue
J Donahue
30,790 Points

Adding a background image

Ok, so I'm working my way through css, but I'm stumped on the background image. It's not complicated and I understand it perfectly, or so it would seem. But when I go to do it on a website that I'm building for practice I get nothing.

Here's what I write in my css file:

p {
    background-image: url('images/hurricane ridge.jpg')
}

The picture is contained within the images folder and hurricane ridge is the name of the .jpg file.
I have the css file linked to my html in the head section. I've even tried to use different pictures to see if that made a difference

...any suggestions?

Dennis Hegstad
Dennis Hegstad
Courses Plus Student 2,243 Points

Hey Jeremy

The issue is most likely because you have a space in your filename for the image. Are you trying to set the background on a paragraph (p tag)? Or the body?

Try this:

p {
      background-image: url('images/hurricaneridge.jpg')
   }
J Donahue
J Donahue
30,790 Points

Originally I wanted to add the image behing my h1 but because that wasn't working I tried to replicate what was shown in the video by putting it behind my paragraph. I also thought that maybe it was the space so I tried it with a different image that I renamed test.jpg, and still no results. Also, I just tried taking away the space like you suggested and nothing.

Dennis Hegstad
Dennis Hegstad
Courses Plus Student 2,243 Points

Is any of the other styling on your site working? Are you linking from your HTML file to the stylesheet?

J Donahue
J Donahue
30,790 Points

oh yeah, I've linked it properly. Everything else stylistically is working.

2 Answers

Andrew Shook
Andrew Shook
31,709 Points

Your problem is the space in your image file name. Right now you are telling the browser to go look for an image file in the images folder literally named "hurricane ridge.jpg", but that file doesn't exist because computers don't store spaces as a space but as a value. Spaces only exist as a mean for people to understand what they are reading. What you need to is add %20 between hurricane and ridge.

J Donahue
J Donahue
30,790 Points

I've tried all of your suggestions, and nothing so far.

Andrew Shook
Andrew Shook
31,709 Points

OK where is you image folder in relation to your css file? Are they both located in the same folder or is the css file located in a folder call CSS and the image in a folder called Images? If it is the later of the two then you need to put "../images/hurricane%20ridge.jpg".

J Donahue
J Donahue
30,790 Points

you did it thank you, thank you

I had thought that you didn't need to add the .. when it was only one folder away. But then again I have to come out of the css folder and go one folder up to the images folder even though all of these folders are right next to each other....ah I see. Thanks!

Andrew Shook
Andrew Shook
31,709 Points

Glad I could help

John Locke
John Locke
15,479 Points

Thanks, Andrew!

John Locke
John Locke
15,479 Points
John Locke
John Locke
15,479 Points

Jeremy:

Try putting a slash in front of images/hurricane-ridge.jpg, see if that helps. It's most likely the path to the image that needs tweaking.

J Donahue
J Donahue
30,790 Points

I've also tried this, but no luck.