157

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.
apaderno
  • 28,547
  • 16
  • 75
  • 90
Robert MacLean
  • 38,975
  • 25
  • 98
  • 152
  • See also http://stackoverflow.com/questions/2168855/css-url-whats-better – harpo Sep 25 '10 at 23:47
  • For the quotes, see [Is quoting the value of url() really necessary?](http://stackoverflow.com/q/2168855/1591669) – unor Feb 13 '15 at 15:59
  • Just a note: in Netbeans 7 if you leave unquoted the path inside url(), u'll get an alert "Unexpected value token url" If you'll put path in single or double quotes, the alert will disapper. – kante Jul 11 '12 at 09:33
  • This has been fixed in 7.3. http://netbeans.org/bugzilla/show_bug.cgi?id=209067 – caiosm1005 Feb 08 '13 at 19:52
  • If your stylesheet file is in a folder (let's call it css) and is linked in, and is not in a ` – Tim May 06 '23 at 13:26

11 Answers11

167

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.

Pang
  • 9,564
  • 146
  • 81
  • 122
Alex Rozanski
  • 37,815
  • 10
  • 68
  • 69
50

  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.

Robert MacLean
  • 38,975
  • 25
  • 98
  • 152
Gumbo
  • 643,351
  • 109
  • 780
  • 844
36

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;
TheVillageIdiot
  • 40,053
  • 20
  • 133
  • 188
5

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');
Amin Saqi
  • 18,549
  • 7
  • 50
  • 70
  • I came wasn't searching for can I use a relative path... I was searching for how to use a relative path... +1 for being clear on where the path starts. – me_ Jan 14 '18 at 08:45
5

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.

Bryan
  • 2,870
  • 24
  • 39
  • 44
2

just check the directory structure where exactly image is suppose you have a css folder and images folder outside css folder then you will have to use"../images/image.jpg" and it will work as it did for me just make sure the directory stucture.

sunny
  • 121
  • 1
  • 2
1

just write in your css file like bellow

background:url("images/logo.jpg")
BERGUIGA Mohamed Amine
  • 6,094
  • 3
  • 40
  • 38
1

you really don't need quotes if let say use are using the image from your css file it can be 

{background-image: url(your image.png/jpg etc);}
beerwin
  • 9,813
  • 6
  • 42
  • 57
Athini Watu
  • 11
  • 1
0

You don't need to use quotes and you can use any path you like!

Rigobert Song
  • 2,766
  • 2
  • 30
  • 47
0

Have a look at the respective sitepoint reference pages for background-image and URIs

  1. It does not have to be in quotes but can use them if you like. (I think IE5/Mac does not support single quotes).
  2. Both relative and absolute is possible; a relative path is relative to the path of the css file.
Ben
  • 2,365
  • 4
  • 22
  • 29
-1

You really don't need single quotes or double quotes... The syntax for the background-image property:

selector {
  background-image: url(image-path-url/.jpg);
}

There are two methods you can mention the background image in CSS

Method #1: Inline CSS

<div style="background-image: url('image.jpg');">
  <!-- Content Here -->
</div>

Method #2: External CSS

.div-background {
  background-image: url(image.jpg);
  background-postion: center center;
  background-size: conver;
  background-repeat: no-repeat;
}

Try This Futher Reference - How To Add Background Image in CSS

manoj
  • 109
  • 1
  • 7