CSS background-image - What is the correct usage?

Question

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);

Or

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.

1. No you don’t need quotes.

2. Yes you can. But note that relative URLs are resolved from the URL of your stylesheet.

3. Better don’t use quotes. I think there are clients that don’t understand them.

1) putting quotes is a good habit

2) it can be relative path for example:

background-image: url('images/slides/background.jpg');

will look for images folder in the folder from which css is loaded. So if images are in another folder or out of the CSS folder tree you should use absolute path or relative to the root path (starting with /)

3) you should use complete declaration for background-image to make it behave consistently across standards compliant browsers like:

background:blue url('/images/clouds.jpg') no-repeat scroll left center;

Relative paths are fine and quotes aren't necessary. Another thing that can help is to use the "shorthand" background property to specify a background color in case the image doesn't load or isn't available for some reason.

#elementID {
    background: #000 url(images/slides/background.jpg) repeat-x top left;
}

Notice also that you can specify whether the image will repeat and in what direction (if you don't specify, the default is to repeat horizontally and vertically), and also the location of the image relative to its container.

If your images are in a separate directory of your css file and you want the relative path begins from the root of your web site:

background-image: url('/Images/bgi.png');