• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 270
  • Last Modified:

body background image

Hi all:

This line will work if I put it directly on the page, but not if I use an external .css file.  Any idea why??

body {background-color: #CCFFFF; background-image: URL("images/Clouds.gif")}

Thanks!
0
ClassyLinks
Asked:
ClassyLinks
  • 6
  • 5
  • 5
  • +1
1 Solution
 
COBOLdinosaurCommented:

background-image: URL("images/Clouds.gif")

First get rid of hte quotes. The url in not supposed to be quoted.

However, it should work the same way whether it is in an external sheet or not; that says there is something else in the sheet causing the problem.

Post the sheet, and i will take a look.

Cd&

0
 
ClassyLinksAuthor Commented:
Thanks Cd...


All other elements of the style sheet work fine.  Only the background is giving me problems.  Removing the quotes has no effect.

Here is the sheet:

<style>

body {background-color: #CCFFFF; background-image: URL(images/Clouds.gif)}
A:hover {color: #FF0000; text-decoration:none}
A:link {text-decoration:none; color: #0000cc}
A:visited {text-decoration:none; color: #0000cc}
A:visited:hover {color: #FF0000; text-decoration:none}

</style>
0
 
a.marshCommented:
What browser are you using?

Have you tried it in different browsers?

What about specifying the image before the colour?

:o\

Ant
0
Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

 
a.marshCommented:
Just wondering - does the browser look for the image relative to the location of the stylesheet file or the HTML file in which the stylesheet is used?

Perhaps that is the issue - are the stylesheet file and the HTML file in the same directory?

Ant
0
 
a.marshCommented:
Of course - my last comment is correct!

I've setup a test html file and a background image - both are in the same directory.

Now I've created a sub-directory and placed the stylesheet there.

I'm using IE5 and it looks for the background image relative to the location of the stylesheet, NOT the location of the HTML being viewed.

Well I've learned something new today!

Ant
0
 
LeathCommented:
Have you tried writing "URL" in small letters?
I mean:

body {background-color: #CCFFFF; background-image: url("images/Clouds.gif")}

I used it this way... with small letters and quotation marks and it works fine...


Leath #-|
0
 
ClassyLinksAuthor Commented:
No luck there ant....I already had it in relation to the stylesheet.

leath:  capitals make no difference.

IE5.5

Removing background color makes no difference, specifying image before colour....no difference.


HMMM...strange eh?
0
 
COBOLdinosaurCommented:
I have sometimes seen a parsing problem in IE4 and IE5 where it loses the first line. The workaround is to stick in a dummy declaration:

<style>
.dummy {color:blue}
body {background-color: #CCFFFF; background-image: URL(images/Clouds.gif)}
A:hover {color: #FF0000; text-decoration:none}
A:link {text-decoration:none; color: #0000cc}
A:visited {text-decoration:none; color: #0000cc}
A:visited:hover {color: #FF0000; text-decoration:none}

</style>

Not guaranteed.

Cd&
0
 
COBOLdinosaurCommented:
BTW for forward compatibility URL should be lower case XHTML is case sensitive, and all attributes and tags are supposed to be lower case. Use of quotes is non-standard, and not supposrted by all browsers.

Cd&
0
 
ClassyLinksAuthor Commented:
Ok...Cd, thanks.


Have changed everything to lower case.  No quotes.  Still no luck.

Any ideas?

BTW - It's not even showing the background-color.  So it is not only a problem with the background-image, but likely with the whole line.
0
 
a.marshCommented:
I agree on "url" being lowercase... but XHTML has nothing to do with the stylesheet parameters does it? Hence the W3C has an XHTML validator and then a CSS validator.

I must admit that I'm a little puzzled then - is the site on the Web so we could look at it ClassyLinks?

:o)

Ant
0
 
COBOLdinosaurCommented:
LOL.  I got curious about resolving the path; so I looked it up.  The standard is to resolve relative urls using the style sheet location.  IE does it that way, but Netscrap uses the HTML page location.  

I learned something too.  

Cd&
0
 
a.marshCommented:
Ahhh! Are you sure it is finding the stylesheet file then ClassyLinks?

Could we see the <link> tag you are using?

A common problem is using:

src="style.css"

and not

href="style.css"


:o)

Ant
0
 
ClassyLinksAuthor Commented:
Holy Cow...how am I ever going to get the hang of this???

Thanks all!
0
 
a.marshCommented:
Did you add the dummy declaration to the external stylesheet file then and it worked?

Ant
0
 
ClassyLinksAuthor Commented:
yup...sorry I wasn't more clear about that.
0
 
COBOLdinosaurCommented:
Strange isn't it.  It does not seem to be documented anywhere and it does not happen consistently on all browsers even when they are the same build.  Has to be something to do with local settings I think.  So I just stick in the dummy on on my external sheets.

Thanks for the A. :^)

Ant,

The XHTML validator should be validating the styles as well but what it returns may depend on the DTD.  I rarily validate, so?...

Cd&
0

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

  • 6
  • 5
  • 5
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now