homepage Welcome to WebmasterWorld Guest from 54.227.182.191
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
CSS Background Image Not Displaying
When specified from CSS
fashezee




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

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




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

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




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

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




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

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




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

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




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

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




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

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




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

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

theniklt




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

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




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

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




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

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




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

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




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

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




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

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




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

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved