17

In amongst my CSS I have the following:

#framecontentTop{
position: absolute;
top: 0;
left: 120px;
right: 0;
height: 100px;
overflow: hidden;
background-image: url(/Users/myname/Website Project/logo.jpg);
color: white;
}

Where the path to the image I want to use as the background-image is /Users/myname/Website Project/logo.jpg

However, when I put in my div with the ID framecontentTop, it doesn't show the image (or indeed anything) as the background. There are no other divs in the CSS to conflict with it, and when I set the background for framecontentTop to a colour or keep it as an image but put the URL as some random image online, it loads it fine. So I can only assume the problem is with how I have specified the path to the image - can anyone see what I have done wrong here?

Many thanks

Deacon
  • 173
  • 1
  • 1
  • 4

3 Answers3

38

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: '(', ')', '\,'.

Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • Thanks, I tried this together with what Jesse suggested above and I'm still getting the same (lack of a) result! – Deacon Mar 08 '10 at 22:46
  • @Nick - no, this is all still local at the moment so its path is file:///Users/myname ... ... – Deacon Mar 08 '10 at 22:51
  • @Deacon - Then that won't work, it's looking for something relative to the website root. Can you make it relative? Just `url(logo.jpg)`? – Nick Craver Mar 08 '10 at 23:06
  • @Nick - thanks again, I gave that a try and oddly enough it works with another image in the same directory...but not the particular image I want?! I really don't see what the problem is now! – Deacon Mar 08 '10 at 23:38
  • @Deacon - Is the CSS file in the same directory as the images, if not how are they related? – Nick Craver Mar 08 '10 at 23:39
  • Finally solved it, and it was something completely different - for some reason the JPG I wanted was saved as a document (?!) rather than a JPG, so a conversion was in order. Thanks for your help, I'm choosing this answer :) – Deacon Mar 08 '10 at 23:44
6

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");
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
2

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

Smaillns
  • 2,540
  • 1
  • 28
  • 40