CSS Background-Image Path Issues

if you are handling the element with javascript you just need to add the "" as the following

element.style.backgroundImage = 'url(' + '"' + imageUrlVariable + '"' + ')';

Note: Obviously this solution is also available if you're handling typescript with Angular


You are using an absolute path that will always resolve to the same URL on your server. If that works when you put it in element A, but doesn't work in element B, chances are the problem is not with the URL, but another background or background-image setting interfering.

I would use Firebug's "Inspect Element" function to find out whether there is another background setting taking precedence.

URLs with spaces should always be in quotes by the way:

background-image: url("/Users/myname/Website Project/logo.jpg");

If you have any special characters, they should be escaped, or in the case of white-space, at least quoted, like this:

background-image: url("/Users/myname/Website Project/logo.jpg");

You can see the W3C Spec for the full requirements.

Some characters appearing in an unquoted URI, such as parentheses, commas, white space characters, single quotes (') and double quotes ("), must be escaped with a backslash so that the resulting URI value is a URI token: '(', ')', '\,'.