PDA

View Full Version : Background Img in CSS


ByteWizard
11-30-2002, 03:05 PM
My website is not finding the background image specified in the stylesheet. The html code and the style sheet are in my web space root. I have an Images dir of this root where all images live.

The CSS code reads
background-image : url(/Images/bg1.jpeg);

Other images used on the site (but not in the style sheet) are found just fine. When I add "/Images/bg1.jpeg" directly in the body spec in the HTML, it is found OK. ???

What am I overlooking?

Zero Angel
11-30-2002, 04:09 PM
Also... you might want to put a period before the first slash, otherwise the browser might mistake the code as referring to a file:// on the users hard drive.

ByteWizard
11-30-2002, 04:16 PM
I have tried it with & without the leading slash. I have not tried with a leading ./ That could be the key.

I remember reading somewhere that the url specification within a style sheet were relative to the directory where the style sheet lives, not .....?? I could not find this reference to re-read the rules. Anyone know of what I speak?

DCElliott
11-30-2002, 06:20 PM
tsk, tsk.

background: #ffffff; url(./images/bg1.jpeg) no-repeat fixed 50% 50%;

I believe it should be relative to the *.html since you will be linking or importing the stylesheet and it becomes "part" of the page. I've never had my stylesheets in a different dir so can't say for sure.

ByteWizard
11-30-2002, 08:16 PM
Well.... I tried all these good suggestions, but still the same results.

./Images/bg1.jpeg

"./Images/bg1.jpeg"

DC... You mis-read my dir structure. HTML & CSS in "root" dir and Images in /Images. So with CSS and the "calling program" HTML in the same dir, the CSS gets included with the HTML. It would seem this would behave as if it were inline and any images spelled out in the style sheet would be referenced in the same manner as images in the actual body of the document (not in CSS). All of these references are /Images/ImageName.gif

Still looking.

ByteWizard
12-01-2002, 04:43 AM
Still have not found the problem...

1) HTML code in root
2) CSS file in root
3) images in "Images" dir off root
4) When these same CSS statements (including the ref to the background image) were "inline" the background image was found.
5) When I loaded everything to the web server, I made the CSS an external file with an single import statement to include the CSS into the HTML code.

Zero Angel
12-01-2002, 12:08 PM
Check your spelling and captilization to make sure that the filename and reference are exactly the same.

Rename the .jpeg file to .jpg and change your reference as well.

Remove the . and leading slash, because you dont NEED it while testing, add it once you've found the real problem. Make certain that you use quotes.

Also check your syntax earlier in the document to make sure that you didn't make a trifling error such as placing a '(' instead of a '{'

DCElliott
12-01-2002, 01:58 PM
I think Zero's got the right angle on it.

I would strip the CSS down to just the body selector and the background property and just the HTML to import the sheet. The page *should* work if you've checked all the syntax, spelling, (case if it a *nix box), etc.

Failing that, post the whole fricking stylesheet and HTML (and run the risk of us finding something blatently obvious. :yeow: )