CSS background-image error

[Struggler]

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)

[drhowarddrfine]

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.

[Death Slaught]

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

[steven]

If your quoted code is accurate, the problem lies in the space between url and the parenthesis containing the url.

You have:

body { background-image: url ('foo.jpg'); }

You should have:

body { background-image: url('foo.jpg'); }

note the lack of whitespace between `url` and the parenthesis.

[Death Slaught]

If your quoted code is accurate, the problem lies in the space between url and the parenthesis containing the url.

You have:

body { background-image: url ('foo.jpg'); }

You should have:

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

[steven]

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 =]

[Death Slaught]

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............ ...

[Struggler]

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