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
Martin Ahlström
12,237 Pointswhy do I have to use inline style tags to get my background images to work?
Much problems last days with getting background images to work. It seems like I have to use inline style tags in the html. If used in stylesheet, nothing happens. I still have to style the images in the css, but not use f.ex: #wrapper { background-image: url("ing/bg.png");} Is this common?
7 Answers
Kevin VanConant
1,833 PointsIs your image in the same folder as your css?
Maybe use directory: url(../img/bg.png) So the image url goes up one directory and then into your img directory?
Martin Ahlström
12,237 Pointstypical to make type-o here. No, that should be img, so not that. I am using Textwrangler as an editor, and the filename gets underlines in the css file when trying to include for background-image. I've changed file name, even changed format from jpg to png in PSD, but still same problem.
Martin Ahlström
12,237 Pointsno, have tried url("../img/bg.png") as well. I have rewritten new index.html and main.css with nothing but the most basic code to try, and same problem appears. Pretty frustrating when for example all that is given at w3c for background-image in body is: body { background-image: url("path"); }
Kevin VanConant
1,833 PointsHave you tried url(../img/bg.png) without the "" marks?
Martin Ahlström
12,237 Pointsyes, tried that as well.
Kevin VanConant
1,833 PointsWhere is your img file in junction to your css file?
Martin Ahlström
12,237 Pointsindex.html is in root, main.css in css folder, images in img folder
Kevin VanConant
1,833 PointsI just tested this out and it worked perfect. My img folder is inline with my html and my css is in my css folder. This jumped up one directory and into my img file.
#wrapper {
background-image: url(/img/kevin.jpg);
}
Martin Ahlström
12,237 PointsI've tested in safari, chrome and firefox. Restarted computer and written new files, same problem... I am starting to get liiitle frustrated after 2 days. I haven't tried different editor though, so I'll do that and get back with results.
Martin Ahlström
12,237 PointsHave now tried with sublime as well, same result. I simple must write the <style> #wrapper { background-image: url(img/path); } </style> in the html. Isn't this odd?
Kieran Gibbons
17,434 Pointsbody { background-image: url('../img/bg.jpg'); } this is what i have used on a site and it works fine.
Martin Ahlström
12,237 Pointsnope, that doesn't work either.
Kieran Gibbons
17,434 PointsKieran Gibbons
17,434 Pointscould it be that ing/bg.png should be img/bg.png?