469,342 Members | 5,623 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,342 developers. It's quick & easy.

CSS background-image error

Please could somebody help me feel like less of a complete idiot.
Following the advice of people who know what they're talking about, I have abandoned MS Front Page and MS Publisher and am trying to teach myself pure HTML and CSS.
Trouble is, I can't get past the following snag on my very first project.
I want to use an image I have as a background, but every time, Firefox 2.0.0.7 returns an error that says: "Error in parsing value for background-image. Declaration dropped."
The style sheet entry reads:

body { background-image: url ("images/lines.jpg"); }

The HTML entry in the head area reads:

<link href="style/style.css" type="text/css" rel="stylesheet" />

I've opened the image in Photoshop and it's a JPG in RGB, 8 bits per channel, and has worked previously on a website.
I've checked the file slug and file location and everything else I can think of, but I'm stumped.
Can anyone help?
Thanks
John Fuller
(Windows XP-SP2 / Firefox 2.0.0.7, Notepad as HTML editor)
Oct 16 '07 #1
7 19269
drhowarddrfine
7,435 Expert 4TB
Following the advice of people who know what they're talking about, I have abandoned MS Front Page and MS Publisher and am trying to teach myself pure HTML and CSS.
Proof that you're not an idiot. You followed good advice.
Firefox 2.0.0.7 returns an error
Firefox does? What are you using in Firefox to show this error?

There is nothing wrong with the markup you show and, if it's a jpg from Photoshop then I'm sure it's OK so we need to see the rest of the markup to determine the problem.
Oct 16 '07 #2
Death Slaught
1,137 1GB
Please could somebody help me feel like less of a complete idiot.
Following the advice of people who know what they're talking about, I have abandoned MS Front Page and MS Publisher and am trying to teach myself pure HTML and CSS.
Trouble is, I can't get past the following snag on my very first project.
I want to use an image I have as a background, but every time, Firefox 2.0.0.7 returns an error that says: "Error in parsing value for background-image. Declaration dropped."
The style sheet entry reads:

body { background-image: url ("images/lines.jpg"); }

The HTML entry in the head area reads:

<link href="style/style.css" type="text/css" rel="stylesheet" />

I've opened the image in Photoshop and it's a JPG in RGB, 8 bits per channel, and has worked previously on a website.
I've checked the file slug and file location and everything else I can think of, but I'm stumped.
Can anyone help?
Thanks
John Fuller
(Windows XP-SP2 / Firefox 2.0.0.7, Notepad as HTML editor)

This most likely wont help any, but could you post your entire markup, and put up the image as an attachment.

Thanks, Death
Oct 16 '07 #3
steven
143 100+
If your quoted code is accurate, the problem lies in the space between url and the parenthesis containing the url.

You have:
Expand|Select|Wrap|Line Numbers
  1. body { background-image: url ('foo.jpg'); }
You should have:
Expand|Select|Wrap|Line Numbers
  1. body { background-image: url('foo.jpg'); }
note the lack of whitespace between `url` and the parenthesis.
Oct 16 '07 #4
Death Slaught
1,137 1GB
If your quoted code is accurate, the problem lies in the space between url and the parenthesis containing the url.

You have:
Expand|Select|Wrap|Line Numbers
  1. body { background-image: url ('foo.jpg'); }
You should have:
Expand|Select|Wrap|Line Numbers
  1. body { background-image: url('foo.jpg'); }
note the lack of whitespace between `url` and the parenthesis.
HTML will truncate the spaces in your text. Any number of spaces count as one. Also a new line counts as one space. So it shouldn't make a difference wether he has spaces between his URL and the background-image attribute.


- Death
Oct 16 '07 #5
steven
143 100+
HTML will truncate the spaces in your text. Any number of spaces count as one. Also a new line counts as one space. So it shouldn't make a difference wether he has spaces between his URL and the background-image attribute.


- Death
CSS is not HTML. The browser will not truncate multiple spaces into a single space... or at least, firefox does not (whether the CSS is inline in the head of the document, or in an external file). Even if the browser truncated whitespace in CSS, which it doesn't... it would still only truncate to a single space and I'm saying that a single space is the cause of the issue. ;)

If his quote was indeed accurate, then that is the problem. Whitespace between 'url' and the parenthesis will cause the background image not to show. Removing the whitespace fixes the issue.

Steven =]
Oct 16 '07 #6
Death Slaught
1,137 1GB
CSS is not HTML. The browser will not truncate multiple spaces into a single space... or at least, firefox does not (whether the CSS is inline in the head of the document, or in an external file). Even if the browser truncated whitespace in CSS, which it doesn't... it would still only truncate to a single space and I'm saying that a single space is the cause of the issue. ;)

If his quote was indeed accurate, then that is the problem. Whitespace between 'url' and the parenthesis will cause the background image not to show. Removing the whitespace fixes the issue.

Steven =]
Nvm you were right congratz =p.........I did a little research and found this in bold:

Do NOT leave spaces between the property value and the units! If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.

That's why it works on my comp if I add 100 spaces between them.

Thanks, Death

PS - Once again congratz on winning this time but don't get used to it lol...............
Oct 16 '07 #7
Steven, you have it right!
The space between "url" and the opening parenthesis for the image file name was the problem. As soon as I removed the space, the background appeared on my page.
Thanks to you, Steven, and also to drhowarddrfine and Death Slaught.
I hope some day I'll know enough to help you guys in return. But I doubt it.
All the best,
Struggler
Oct 25 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

12 posts views Thread by Stanimir Stamenkov | last post: by
1 post views Thread by CMAR | last post: by
8 posts views Thread by Serge Hartmann | last post: by
6 posts views Thread by Francois Bonzon | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.