Why are the background images in my absolutely positioned div not displaying??

views:

answers:

Why are the background images in my absolutely positioned div not displaying??

I can't figure out why my background images in my absolutely positioned divs aren't displaying. I'm using firefox, but also in Chrome.

Pariticularly odd is that when viewing the page with the web developer toolbar's Edit CSS dialogue open, the images appear.

The images in question are a div with an id of "joel-image" and the nav items.

http://joelglovier.com

+5 A:

The paths in css are relative to the actual css file .. not the html page..

so your path should either be ../img/joel-image.jpg or better /img/joel-image.jpg

Currently your css file is in /css folder, so the background image property of url(img/joel-image.jpg) translates to /css/img/joel-image.jpg which is wrong ..

Gaby 2010-07-24 17:56:36

+1. I suspect that reason that they're showing in your CSS inspector is that it is using paths relative to the webpage rather than the CSS file.

slightlymore 2010-07-24 17:59:45

This is so true! +1.

Tom 2010-07-24 18:02:27

+1 Also, rather than using the web developer toolbar for checking this kind of thing, you might want to use Firebug for Firefox instead, which will give you a more accurate picture of what's actually happening on the rendered page. The WDT is good for checking that assets exist, amongst many other things, but Firebug is often better for identifying the causes of page-rendering problems. Use both extensions in tandem, they go great together.

hollsk 2010-07-24 18:05:51

man I feel like a dummy. thanks for the heads up!

JAG2007 2010-07-24 18:08:59

@hollsk - yes, I have and use both. But I tend to get so immersed in the WDT because I am writting my styles directly in it that I miss out some of the functions of firebug.

JAG2007 2010-07-29 19:25:59

+1 A:

The request the browser is making to the image, is returning a 404. So the path to your image is wrong. Double check it. Try an absolute path.

jordanstephens 2010-07-24 17:58:06

ansaurus

tags:

views:

answers:

Why are the background images in my absolutely positioned div not displaying??

related questions