This week's book giveaway is in the OO, Patterns, UML and Refactoring forum.
We're giving away four copies of Refactoring for Software Design Smells: Managing Technical Debt and have Girish Suryanarayana, Ganesh Samarthyam & Tushar Sharma on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes Background Image Problem in External CSS Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login

JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Background Image Problem in External CSS" Watch "Background Image Problem in External CSS" New topic

Background Image Problem in External CSS

Mike Guthrie

Joined: Aug 16, 2004
Posts: 2
I am coding a menu that utilizes javascript to change classnames on mouseover and mouseout events on the TD tag. Both Style classes that I use have an image defined for background. If I put the Style classes directly in my page between the Style tags the images appear correctly. If I put the style classes in an external CSS file and use the LINK tag to include it in my page, the images do not appear at all, although the other style properties work. Has anyone experienced this beahavior before and is there anything I can do to fix it??
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
tyr using the full path name to the image and also a relative path to the image and see if either one works...

Julian Kennedy
Ranch Hand

Joined: Aug 02, 2004
Posts: 823
It sounds like an issue with the URLs you're using. The question is, if you're using relative URLs in the CSS file, what are they relative to? Is it the location of the CSS file, or is it the location of the page that the link is on?

I believe it's the former, but my CSS has always worked in both places without error (I think!) and I've never really given it much thought. I use the following directory structure:

My background CSS looks like: { background: url(../images/image-1.gif); }

If your set-up is different to that then this might help you out.

Mike Guthrie

Joined: Aug 16, 2004
Posts: 2
Thank you.
I solved the problem by placing a '../' before the image path. For example, I went from 'images/button.gif' to '../images/button.gif' and that worked.
- Mike
I agree. Here's the link:
subject: Background Image Problem in External CSS
It's not a secret anymore!