Robert MacLean Robert MacLean - 4 months ago 11x
CSS Question

CSS background-image - What is the correct usage?

What is the correct usage of the CSS background-image property?
The key things I am trying to understand is

  1. Does it need to be in quotes i.e.:
    background-image: url('images/slides/background.jpg');

  2. Can it be a relative path (as above) or must it be a full URL?

  3. Any other points I should be aware of to make sure it works correctly across standards compliant browsers.


The path can either be full or relative (of course if the image is from another domain it must be full).

You don't need to use quotes in the URI; the syntax can either be:

background-image: url(image.jpg);


background-image: url("image.jpg");

However, from W3:

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

So in instances such as these it is either necessary to use quotes or double quotes, or escape the characters.