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
Jeffrey Bulman
Courses Plus Student 1,747 PointsBackground image, what am i doing wrong.
So ive been banging my head against the wall for over an hour now. Im trying to put a background image on my site. I am writting this body { background-image: image('background.jpg');}
what am i doing wrong ?
8 Answers
Rich Bagley
25,869 PointsHi Jeffrey,
Including a forward slash before the img means that this is relative to the root of the website.
/ is the root
'/img/background.jpg' is the img folder relative to the root of the site
'img/background.jpg' (no slash as previously) would be looking for an img folder relative to the folder the style sheet is currently within.
So, if your style sheet is within a 'css' folder you would essentially be doing the following (and therefore the wrong image path):
{background-image: url('/css/img/background.jpg');}
Hope that makes sense.
Rich
Rich Bagley
25,869 PointsHi Jeffrey,
Did any of the answers above resolve your issue?
Thanks
-Rich
Rich Bagley
25,869 PointsHi Jeffrey,
Instead of:
body {background-image: image('background.jpg');}
can you try:
body {background-image: url('background.jpg');}
If this is causing issues still it could be the location of the image with reference to the root of the website.
If your background image is located in an 'img' folder from the site root for example the URL would likely be something similar '/img/background.jpg' instead of just 'background.jpg'.
Another reason it may not be showing could be due to a background colour on an overlaying section, e.g. a div.
Hope one of the above helps identify any issues.
Rich
Michael Jurgensen
8,341 PointsI just tried this on a new blank file and it works. Here is the code:
<pre> body { background-image: url("04sell.png"); } </pre>
Make sure you are pointing to the correct directory for your image.
Jeffrey Bulman
Courses Plus Student 1,747 PointsOk so ive tried the body {background-image: url('background.jpg');}, then tried body {background-image: url('img/background.jpg');}
the image is in the img folder still nothing is showing.
so i then tried
body { background-image: url("background.jpg"); background-color: #cccccc; } the grey color showed but the image did not show. I had some issues earlier on in the week with my images not showing on any of my sites in work spaces, after emailing support they fixed the issue and now it seems they show on workspaces but not on the site.
Rich Bagley
25,869 PointsHi Jeffrey,
Is your style sheet in an external folder, such as 'css'? It could be that the following is looking for an 'img' folder inside a 'css' folder:
{background-image: url('img/background.jpg');}
If so, could you try it with a forward slash before, e.g.
{background-image: url('/img/background.jpg');}
Does this make any difference?
Rich
Michael Jurgensen
8,341 PointsHmm strange. Just to make sure is your img folder inside the same directory as your css file? I want to try to replicate this.
Albert Kirchmeyr
11,410 Pointschange image to url and it will work
body { background-image: url('background.jpg');}
Jeffrey Bulman
Courses Plus Student 1,747 Pointsok so adding the forward / before img has made it work. Why did this make the difference ?
Jeffrey Bulman
Courses Plus Student 1,747 PointsYes rich thanks a lot, you have helped me immensely. il make sure i come and find you if i have any more issues. Quick question what code editor do you use ?
Rich Bagley
25,869 PointsHi Jeffrey,
No problem, glad you got it sorted.
I use TextWrangler on Mac at the minute but going to trial something called Brackets by Adobe.
Notepad++ is a good one for PC too.
-Rich
Cristin Birdchett
41 Pointsyour doing a lot of things wrong
Jeffrey Bulman
Courses Plus Student 1,747 PointsJeffrey Bulman
Courses Plus Student 1,747 Pointsive also tried
body {background-image: url('img/background.jpg');} body{background-image: image('img/background.jpg');}