CSS Background Image Not Displaying

When specified from CSS

[fashezee]

I have the following code in an external style sheet.
However the image does not display when I apply the class to the body
of my HTML page. The exact same code works fine in other HTML pages.
What can be the problem?

.watermark {

background-image: url(/images/watermark.jpg);
background-repeat: no-repeat;
background-position: 158px 150px;
background-attachment: fixed;
}

[SuzyUK]

I reckon it's a path issue

external stylesheets call the image relative to the itself and NOT the HTML pages.

so stylesheet call might need to be
../images/yourimage.gif

but it depends where you css file resides in relation to your images directory

Suzy

[theniklt]

Dear folks
I just read about your problems. I cannot provide a solution but have another question concerning the same problem (at least I guess so).

I also have an external css file coded like this

...
body {...
background-image: url("http://localhost/00neu/00Pix/background.gif");
...}
...

It works fine under Netscape 4.6 and IE6.0 but it does not work with Netscape 7.0.

I checked path issues already and "./00Pix/backgound.gif" shows same peculiarities (works with Netscape 4.6. IE6.0 but not with Netscape 7.0)

Sorry I could not help but instead raised some more questions.

best wishes,
Thomas

[Nick_W]

Welcome to WebmasterWorld [webmasterworld.com] theniklt,

The only thing I see wrong with that is that you do not need the quotes. Try:

background-image(http://yoursite/images/bg.gif);

Nick

[theniklt]

Dear Nick_W
thanks for the kind welcome and fast response. I was not yet able to test the suggested code, but will do that soon and give you feedback.
Thomas

[theniklt]

Dear Nick
I tried your option, unfortunately it did not work. There must be a bug somewhere else in the code. I do not have any idea yet. However I keep exploring this subject.
What I did now was to include the background attribute in the body tag of my html doc. The only bad thing about this is, that updating or changing the background image of all html docs is a timely task.
Best wishes,
Thomas

[DrDoc]

theniklt, welcome!

Remove the comments from your style sheet and you'll see that it'll work ;)

The old way of doing it was:

<style = type="text/css">
<!--
styles here...
-->
</style>

However, a browser is allowed to ignore anything within comments, hence your style sheet will not be rendered. Also, it may not be rendered unless you have specified type="text/css" in your style tag.

[DrDoc]

Oh, and Nick is right - no quotes within parenthesis :)
It will still work, but they're not supposed to be there...

[theniklt]

Dear DrDoc
Thanks for your advice. By trial and error I found out that quotes work as well in the url statement of the css. From what I have read now I know, that they are not supposed to be used.

When I poste the first message I did not give you a complete picture of my problem - that has been may fault.

The thing that drives me mad is, that every statement else specified in the css file is rendered ok. There are almost no differences between IE6.0, Netscape 4.0 and Netscape 7.0 (except for example that font size small for Netscape is about the same size as x-small of IE). The only thing that does not work in my case is the background-image statement. Netscape 7.0 ignores it. The other 2 mentioned browsers render it ok.

Now I did as you told me and removed the comment tags in the css-file. Result was the same. Everything except the background-image statement was rendered as it should. However, Netscape 4.0 ignored the background image statement as well.

Well it is late now and I should go to bed and sleep about it. I will give it a new try tomorrow. Since no one else has similar problems, I am afraid that there is a stupid mistake somewher in my code.

Thanks for the advice, good night
Thomas

[tedster]

Definitely check your path to the image. The code you posted above (http://localhost/00neu/00Pix/background.gif) is only for your local computer and will not work from your website's final location on the server.

Also be careful if the image, the css file and the page itself are not all in the same directory. I'd suggest using absolute URLs if that's the case, or relocating the css and image files to the same directory as the HTML.

I've heard of some browser inconsistencies when you use relative paths to other directories (that is, a difference in whether the path is read as relative to the HTML page or relative to the CSS file)

[theniklt]

Heres a final update

As all of you suggested I checked and double checked the path. I tried several options. I used absolute and relative URLs, and I put the background image in the folder of the css and html file. Here are the results:

The background-image attribute of the body tag specified in a external css file is ignored by (my) Netscape 7.0.

If the css is included within the head of the html document Netscape 7.0 renders it ok.

The comfort of external css is lost. But I guess I have to live with it.

Thanks for your help.

kindest regards,
Thomas

[DrDoc]

Remember that the path is relative to the external CSS file, not the document.

If your CSS file is in a subdirectory, you will have to change the path.

Then, it still won't work in NN4, since NN4 gets it wrong. So, using an absolute path is probably the best solution:

background: url(http://www.example.com/img/blah.gif);

[BjarneDM]

hmmm ... if I remember my standard correctly, you can use url() both as url(path) and url("path"). The advise is to use the one without " as some browsers (can't remember which ones) have problems with these. Secondly, the standard says that the url() is relative to the *stylesheet* but some browsers interpret the url as relative to the *document*. Thus the advise is to either use absolute url's (http://path/file) or root-relative url's (/path/file) and abstain from using relative url's (../path/file/ or file)

[annej]

When I put

body {background-image:url(C:\02html\patches\bgpatt.jpg);}

in the head of an HTML page it works fine but if I put it on a CSS sheet it doesn't work at all. This is true no matter what version of Netscape or IE I've tried.

Meanwhile everything else I have on the separate stylesheet works fine. I haven't tried to replace tables but font size, font and background color etc works great.

I must be missing some subtle thing. Any ideas?

Anne

[BlobFisk]

annej,

Try using a relative URL (../images/image.gif). Don't forget that the path is from the location of the CSS file, and not the html file!

HTH