Url for image in css


#1

Hi,

I’d like to call a background image for every item in a list. Something
like

div#nav li.submenu {background: url(dropmenu.gif) 95% 50% no-repeat;}

the image is in public/images/dropmenu.gif

Thanks,
Peter


#2

“background: url(/images/dropmenu.gif)” should work… “public” is your
document root as
far as the server is concerned…

b


#3

Same idea…

The “public” directory is the web root (where the server looks for
static files). In it is
an “images” dir and a “stylesheets” dir. So, the image you want can be
found at
/images/dropmenu.gif (start at root, go into images) or – when you’re
in the stylesheet
and hence in the stylesheets folder – it can be found at
…/images/dropmenu.gif (meaning
go up one level and then down into images).

Hope I’m not being too pedantic.

b


#4

Thanks Ben.

I just got it to work with

div#nav li.submenu {background: url(…/images/dropmenu.gif) 95% 50%
no-repeat;}

I don’t know why. I just experimented.

-Peter


#5

I prefer using absolute paths. /images/image.gif is much cleaner and
much more clear than …/images/image.gif.

What’s the …/ ? You might know now, but you may not always know. =P

There is a little problem with absolute paths. Internet Explorer does
not cache them:

" … P.S. There’s an other bug in Intenet Explorer (unrelated?) that
causes caching of images in CSS only happen with relative paths, so
never use background-image:url(/images/blah.png) but do a
background-image:url(…/images/blah.png), relative to the path your
CSS file is in."

See the rest of the wonderful post of Thomas F. here:

http://mir.aculo.us/articles/2005/08/28/internet-explorer-and-ajax-image-caching-woes

Best regards,

Luben


#6

I prefer using absolute paths. /images/image.gif is much cleaner and
much more clear than …/images/image.gif.

What’s the …/ ? You might know now, but you may not always know. =P

  • Rabbit