Welcome to WebmasterWorld Guest from 54.221.87.97

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Background Image Not Displaying

When specified from CSS

     

fashezee

12:13 am on Mar 19, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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

1:55 am on Mar 19, 2003 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

10:10 am on Mar 19, 2003 (gmt 0)

10+ Year Member



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

10:13 am on Mar 19, 2003 (gmt 0)

WebmasterWorld Senior Member nick_w is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

9:41 am on Mar 20, 2003 (gmt 0)

10+ Year Member



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

10:15 pm on Mar 20, 2003 (gmt 0)

10+ Year Member



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

10:44 pm on Mar 20, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

10:45 pm on Mar 20, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

theniklt

11:26 pm on Mar 20, 2003 (gmt 0)

10+ Year Member



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

11:57 pm on Mar 20, 2003 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

2:06 pm on Mar 21, 2003 (gmt 0)

10+ Year Member



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

9:01 pm on Mar 21, 2003 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

1:53 pm on Mar 24, 2003 (gmt 0)

10+ Year Member



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

1:42 am on Mar 30, 2003 (gmt 0)

WebmasterWorld Senior Member annej is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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

12:31 pm on Mar 31, 2003 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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