css image path not rendering correctly

Question

Hi Guys, web newbie here,

I have a css file on my site that references an image (pic.png) like so:

content { border: 1px solid #000000; background: #ffffff url(images/pic.png) 50% 50% repeat-x; color: #000000; }

When I use firebug I see that it tries to get:

GET /path/to/css/%22images/pic.png%22

For some reason it wraps it with url encoded quotation marks (%22), and then I get a 404 not found error.

Any ideas?

Answer 1

I think firefox tries to fix your code by adding quotations around the path, which you are supposed to do. Apprarently it messes up some way..

What happens if you add quotation marks manually?

Answer 2

According to the Specification, background image should be: (as corrected by Gumbo)

"The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same."

Although, I never use the ' and everything works fine.. Try that and see.

If it doesn't work, try to use just background-image instead of the shortcut.

:)