473,226 Members | 1,340 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

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

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

Similar topics

12
by: Stanimir Stamenkov | last post by:
Here are two cases regarding inline-level elements' line-height, padding and background, which I doesn't understand: <div style="background: black; color: white; line-height: 1.5">...
1
by: CMAR | last post by:
I have a design of a frameless page on my practice website: http://home.ne.rr.com/thespar/designerN.htm The idea is to have a #left navigation bar which is absolutely positioned and which...
8
by: Serge Hartmann | last post by:
hi there, I created two different backgrounds for the same page to obtain a (fake) left margin and a (true) right margin. -> left background, defined in body section, aligned bottom and with...
4
by: coolsti | last post by:
I have been playing around with this task for some hours now, and can't seem to find a way. I have an assortment of buttons on a web page, which have their background colors defined via style...
3
by: Peter Williams | last post by:
Hi All, I want to write some javascript for a html page which does the following. Imagine that the page contains a table with 2 columns and 3 rows, e.g.: +---+---+ | A | B | +---+---+
6
by: Francois Bonzon | last post by:
Any idea how I can launch a background task from a PHP script? For example, when a user posts on my message board, it may fire many e-mail notifications to other users, and other tasks. I want...
0
by: Jeb Hunter | last post by:
Well, how can I describe this succinctly? I have a page with DIVs that us background images to produce a border effect. It works perfectly well, but I want to make up (for now) 3 different...
2
by: darkpowrjd | last post by:
I've been trying to create a new navigation system for my site, and I got everything figured out except for one thing. Here is the CSS code I'm using right now: body { font: normal 10px Verdana,...
7
by: arupfrancis | last post by:
Hi, I am trying to create a colored box using background images. I am able to do it easily using tables but doing it in divs is proving to be an issue. Moreover IE and Mozilla also seems to be...
0
by: veera ravala | last post by:
ServiceNow is a powerful cloud-based platform that offers a wide range of services to help organizations manage their workflows, operations, and IT services more efficiently. At its core, ServiceNow...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
2
by: jimatqsi | last post by:
The boss wants the word "CONFIDENTIAL" overlaying certain reports. He wants it large, slanted across the page, on every page, very light gray, outlined letters, not block letters. I thought Word Art...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.