css relative directory problem

[steve c]

wonder if someone could help
I'm trying to set a background image for a page using ccs
the page is in the root directory of the site, as is the image I want to use.
The css file is located in a 'css' directory under the root.

So in the css file I have this

body {
background: url(../image1.gif) repeat;
color: #FFFFFF;
}

but the page doesn't seem to pick up the image.

This works fine on my development PC, both in IE and Firefox

I've done a search and tried all the variations I have seen suggested without success.
Even tried putting the image in the css directory and using 'background: url(image1.gif) repeat;' ... which didn't work either

At the moment I've moved back to defining it in the body tag of the actual page (which works), but would prefer to have it in css, and would like to find out what the problem is here for future coding

Thanks

[Bob Barr]

This works fine on my development PC, both in IE and Firefox
If it's working fine on your development machine (I presume Windows) but not working under Linux on the server, be sure to check the capitalization of the file name.

Linux is case-sensitive in its handling of path and file names; Windows isn't.

Windows will see the names "Image1.gif", "image1.GIF" and all of the other variations as being the same file. Linux treats them as distinct files and wion't be able to find the file if the link and the actual file name don't match exactly.

[wysiwyg]

If what you say is accurate, then something else is interfering here.

Your directory structure is like this..
/index.html
/image1.gif
/css/style.css

/index.html calls "css/style.css" or "/css/style.css";
/css/style.css calls "../image1.gif" or "/image1.gif";

If the background image is the only thing that doesn't work out of your css file, then it's calling the css file correctly. The path to the image from the css file is correct, going by what you've said. So, maybe the image isn't where you say it is, or maybe it has capital letters in it and you're simplifying the example.

Or whatever.

Answer it before me, see if I care.

[felgall]

If the image is in the same directory as the page then you don't need the ../ on the front.

[Bob Barr]

If the image is in the same directory as the page then you don't need the ../ on the front.
I'd think that the "../" is needed since the image file is being accessed from the css file, located one directory level down from the HTML page and the image file.

Since the page works on the development machine but not on the server, I'm still suspicious that there's a file name capitalization mismatch.

[wysiwyg]

Relative links in the css file go by that file's location, not the page it's accessed from. Otherwise it would be a mess.

[Bob Barr]

Relative links in the css file go by that file's location, not the page it's accessed from. Otherwise it would be a mess.
I can certainly agree with that.

Since the css file is located one directory level down from the image file that it's referencing, the "../" portion is needed to point back up to the previous directory level from the css subdirectory.

[Early Out]

Relative links in the css file go by that file's location, not the page it's accessed from. Otherwise it would be a mess.
I've seen an IE bug situation, however, in which the url() address is taken to be relative to the location of the HTML page, not relative to the location of the CSS file. And it was, indeed, a mess.

Until the writer of the Javascript I use managed to find a workaround, I found it was necessary to put the full URL in there, like: url(http://example.com/css/image.gif).

[steve c]

thanks for all your help.
It was a capitalization issue. The file on the server was 'Image.gif'
Coming from a Windows development environment I keep forgetting about case sensitivity. All the new files I create now are all lower case to avoid this ... but some of my old image files are mixed case, and I forget to check.

[Bob Barr]

thanks for all your help.
It was a capitalization issue. The file on the server was 'Image.gif'
Coming from a Windows development environment I keep forgetting about case sensitivity. All the new files I create now are all lower case to avoid this ... but some of my old image files are mixed case, and I forget to check.
That's certainly a really easy problem to miss (says the long-time Windows user who's been burned by this, unfortunately, more than once :mad:).

Like you, I've adopted an all lower-case rule for file and directory names. Every so often, though, I'll find myself slipping into camelCase (or is it CamelCase?) inadvertently.

[php8ox]

If anyone else is still reading and not finding a solution:

say directory is /home/username/images/image.gif
say your domain is http://domain.com/

you can always change the css to direct hit (your site or anywhere):
here's the class example:

.logo { background-image: url('http://domain.com/images/image.gif') }
.logo { background-image: url('/images/image.gif') }

if CSS file is in root directory also, then:
.logo { background-image: url('images/image.gif') }

same results for all three. if you move the image, test full url, then start at web root /images/image.gif then if you have to, use ../ or ../../ or ./
relative links are my least favorite thing ever.