Showing posts with label relative paths. Show all posts
Showing posts with label relative paths. Show all posts

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!