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 Randhir Rana
Randhir Rana
4,754 Points

First Website Project

Hi I am setting up my first website and having trouble putting an image in my main header.

Here is my code /* .Main-Header { background-image: url('header.jpg'); } */

I know this is a relative file path error, but i can't seem to line up the proper file directory. I am using a mac and the file is placed inside a img/projectfolder/desktop.

Please Help Thanks!

Randhir Rana
Randhir Rana
4,754 Points

Here is my code:

'''.Main-Header { background-image: url('header.jpg'); }

h1 {

background:plum;
margin: 250px 0px 250px 0px;
text-align: center;

}'''

2 Answers

Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Your image path is very strange. I would move the image into the project folder and set up a file tree that is more standard with the project folder, and the img folder inside the project folder.

Desktop is usually at the top of the tree. I suggest you carefully examine the path. It is probably desktop/projectfolder/img. If so, then your code path depends on where your css file is. If it is in a css folder, then the path is ../img/header.jpg

Jeff Lemay
Jeff Lemay
14,268 Points
Jeff Lemay
Jeff Lemay
14,268 Points

This is assuming your stylesheet (where this code is) is located inside a css folder.

../img/projectfolder/desktop/header.jpg

So we go up one directory to get out of the css folder by using "../", then we go into the img folder, into projectfolder, into desktop, and there's our image.