Which type of quotes we should use in css background url ("....")? Single, double or no quote needed? [duplicate]

Question

this

background:url(http://url);

this

background:url("http://url");

or this

background:url('http://url');

Shelley

I know it's valid to not use quotes, but it doesn't feel right to me! – Washer

Answer 1

The URL bits of all three of your examples are valid CSS, according to the CSS specification.

Note that the spec identifies some characters in a URL which will need to be escaped with a backslash if present in an unquoted URI, such as parentheses, commas, white space characters, single quotes (') and double quotes ("). For this reason, you might find it better to use single or double quotes around your URLs.

Note that you need to write your full CSS property in the format:

background: url( http://example.com );

Tame

u mean if url has special character then single or double quote should be used. – Shelley

no - you can include a url with special characters without quotes provided that you escape the quotes with a backslash (like such: example.com/lo\(url\)wi) - my point was that you'll find it easier to quote all of your urls ("example.com/lo(url)wi") rather than escape the ones which are troublesome – Tame

@dexter - that same i was saying it's good to use quote always. – Shelley

Answer 2

I don't think any are right. It should be one of these:

background: url(http://url)

background: url("http://url")

background: url('http://url')

Note the colon, instead of curly braces.

Custard

Answer 3

It is your choice, according to W3:

The format of a URI value is 'url(' followed by optional white space followed by an optional single quote (') or double quote (") character followed by the URI itself, followed by an optional single quote (') or double quote (") character followed by optional white space followed by ')'. The two quote characters must be the same.

Lowland

Answer 4

I use the one without quotes. I remember reading something by Zeldman that said it was the least likely to cause problems with legacy browsers. I believe the browser he mentioned was ancient, like Netscape 2 or something. Nowadays, it wouldn't matter which style you use.

Edythedythe

Answer 5

It seems any of the quoted or non quoted are acceptable (http://www.w3.org/TR/css3-background/)

BUT these below are only used IF you are referencing resource outside of your domain.

background: url(http://url)
background: url("http://url")
background: url('http://url')

IF you are on the same domain: (The "HTTP://" is not required, as previously mentioned)

background: url(/path/to/file)
background: url("/path/to/file")
background: url('/path/to/file')

Cimbri