Ok, bizarro, but wanted to put this up here since I couldn’t find anything at all about after firing a whole ton o’ queries @ Google, (it can’t really be that no one else has ever had this problem, can it?!). In any case, here’s the issue:
Have been reading Dan Cederholm’s Bulletproof Web Design, (been looking for new web designs - hey, when you’re idea rich, but cash poor, you do what you need to do to get the job done!
) and each time I try setting background images using the precise code from the book, I get nothing… zip…. nada…. I normally use Firefox, (1.5.0.1) so tried checking to see if it worked in IE6, nope.
Ok, so after running a whole ton of queries on Google, and otherwise futzing around without success for quite some time, (playing with file paths, single quotes, double quotes, using @import instead of <link />, etc., etc.) decided to download Dan’s sample code, and extracted the files for Chapter 9, (i.e. where he finally does a full-page layout). For transport, Dan decided to put all the styles inside <style> tags within the main index.html file, rather than as an external stylesheet. No biggie, should be no problem to cut it back out, put it into a separate file, insert a link, and go. So, before going any further, I open the file in Firefox, all background images, etc. are there, so great, we’ve got a working prototype.
So, onto step 2. I yank all the style info out of index.html, save as a new .css file, link the two together, and phoosh - the background images are gone again! All the rest of the formatting is intact, so it’s definitely using the external css file, but the background images are just not showing up for some reason, (and the images themselves are still in the exact same directory, as is the index.html file).
So, after cross-checking again about a hundred times, it was back to Google, (again largely without success - which is _really_ surprising - I don’t think I’ve ever had Google fail me as utterly as it did on this one, which is why I’m writing this, so hopefully the next poor sap will have this come up!
). After just about giving up, I remembered how many variants people used to point to their bg images, and one that I saw, in particular, kept bothering me, since it didn’t look like it should work - i.e. url(../img/bg.gif) - which suggests that the browser’s thinking you’re in some other first level child directory, and thus need to back out (../) and then go into img/ to locate bg.gif. So, what the heck, apparently it’s working for somebody, why not give it a try? Sure enough, boom - the bg images are all back in place.
So, not sure, but it looks like if you reference a css file in a subdirectory, all bg image locations are taken from wherever that css file is, (hence why you need the ../ preceding) rather than from your document root. Now, I could have sworn that a whole mess of folks had their css files inside css subdirectories without using the ../, but who knows? The important thing is it works!
So, change all url(img/bg.gif)’s to url(../img/bg.gif)’s and you should be fine, (and here’s hoping you found this easily on Google so that you don’t have to waste all the time I did for something as silly!
).