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 Evan Ratzlaff
Evan Ratzlaff
776 Points

How do i insert an image in css?

I have some images in a the same folder as my .css and .html files that i would like to insert in css as my background instead of a color. Either I'm not linking it right or something. is this the wrong syntax:

body { background-image: url(Evan Ratzlaff/imagename.jpeg) }

Where Evan Ratzlaff is the desktop folder the images are in.

i suppose its a simple problem but could someone set me straight? Or provide the syntax that it shoud be in? Or does it have to be linked to the web address it came from?

The images are located in the same folder as the .html and the .css file.

3 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Hi Evan, try targeting the <html> element instead. Also, it's probably best not to have any spaces in file names or folders. Remember, with the way you have the file path linked, the index.html file should be on the same level as the ratzlaff folder.

html {
    background-image: url(ratzlaff/image.jpg)
}

You might also be interested in how to do a Full Page Background.

eck
eck
43,038 Points
eck
eck
43,038 Points

I am not 100% sure that this is your problem, but try to rename the "Evan Ratzlaff" to a single word, like "evan-ratzlaff" and then changing the background-image value to reflect this.

Ricardo Diaz
Ricardo Diaz
30,415 Points
Ricardo Diaz
Ricardo Diaz
30,415 Points

Not sure if this is correct but you mention you have some images in your css folder but then you are linking to a desktop folder. It might be that you are trying to access a file outside of the folder that your project is in. I would create a new folder called "images" inside of your project folder and copy the image into it. Then depending on where your css files are located just point to it. For example if your css files are located in a folder I would just do this:

body { background-image: url(../images/imagename.jpeg); }

The ../ jumps out of the CSS folder and goes into the images folder you just created and would find that image.