The <url> CSS data type denotes a pointer to a resource, such as an image or a font. It has no proper syntax and can only be expressed through the url() functional notation. URLs are used in numerous CSS properties, such as background-image, cursor, @font-face, and list-style.
URI or URL? There is a difference between a URI and a URL. A URI simply identifies a resource. A URL is a type of URI, and describes the location of a resource. A URI can be either a URL or a name (URN) of a resource.
In CSS Level 1, the url() functional notation described only true URLs. In CSS Level 2, the definition of url() was extended to describe any URI, whether a URL or a URN. Confusingly, this meant that url() could be used to create a <uri> CSS data type. This change was not only awkward but, debatably, unnecessary, since URNs are almost never used in actual CSS. To alleviate the confusion, CSS Level 3 returned to the narrower, initial definition. Now, url() denotes only true <url>s.
Syntax
A URL is expressed using the url() functional notation. It may be written without quotes, or surrounded by single or double quotes. Relative URLs are allowed, and are relative to the URL of the stylesheet (not to the URL of the web page).
<a_css_property>: url("http://mysite.example.com/mycursor.png")
<a_css_property>: url(http://mysite.example.com/mycursor.png)
Note: Control characters above 0x7e are not allowed in unquoted URLs, starting with Firefox 15. See bug 752230 for more details.
Examples
.topbanner {
background: url("topbanner.png") #00D no-repeat fixed;
}
ul {
list-style: square url(http://www.example.com/redball.png);
}
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Values and Units Module Level 3 The definition of '<url>' in that specification. |
Candidate Recommendation | No significant change from CSS Level 2 (Revision 1). |
| CSS Level 2 (Revision 1) The definition of '<uri>' in that specification. |
Recommendation | No significant change from CSS Level 1. |
| CSS Level 1 The definition of '<url>' in that specification. |
Recommendation |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (1.0) | 3.0 | 3.5 | 1.0 (85) |
| Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 1.0 | 1.0 (3.5) | yes | yes | 1.0 |