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 Timothy Tuite
Timothy Tuite
5,429 Points

Background image in css

I can't figure out how to directly link a file into css to be used as a back ground image my i have web/img/ then the pics web/css/ then the stylesheets web/html folders i cant seem to get the right file path to get the image to load the image is web\img\greyfade.jpg

2 Answers

tootiemcflow
tootiemcflow
5,601 Points
tootiemcflow
tootiemcflow
5,601 Points

Hey Timothy Tuite,

Looks like you need to go up a folder and then into the img folder. You do this with two periods and a forward slash ../. For example ../img/greyfade.jpg means back out of the current folder, go into the img folder. and grab the greyfade.jpg image.

Folder Structure:

web
 - css
   - main.css
 - img
   - greyfade.jpg
 - index.html

CSS:

.bg {
  background-image: url('../img/greyfade.jpg');
}
Sam Baines
Sam Baines
4,315 Points
Sam Baines
Sam Baines
4,315 Points

Hi Tim - the syntax for the background image in css should be as in this codepen but you obviously use any selector you would like - I just use 'body' as an example. The url file path depends on your file set-up -- normally have the index and other HTML files top level and then images in an img folder and css in a css folder within that top level directory, then the attached syntax will work correctly. Hope this helps.