Tuesday 18 August 2009

How do you get an image to appear in an DIV, paths?

This is a silly one. I have used without a problem the CSS background-image: statement including backgrounds for DIVs, until today that is....

I have an html document in the root folder, along with two sub folders: a resorces folder for my stylesheet style.css and an images folder for all the images. Before the lightbulb switched on I referenced my images as background-image:url('images/image_name.jpg') BUT to my frustration for a good half an hour was the images did not appear - now I was trying to use a background for a DIV but it could have been any images.

The light bulb moment - I feel daft for admitting to the problem but I have seen it before and still did not remember... so the issue is simply this - the path used is relative to the stylesheet loaded and NOT the HTML document as I imagined. So, I originally used '/images/imagename.jpg' which is relative to the html, and what I needed for it to work was actually a path like '../images/imagename.jpg' which is because the stylesheet is in a resources folder, so the path needs to be a parent folder above before navigating to the images folder.

Like I said a real simple one to solve, but when I was convinced in my mind the path should be relative to the root folder it took quite a bit of head bashing to get it fixed!

No comments:

Post a Comment