The <url>
CSS data type denotes a pointer to a resource, such as an image or a font. URLs can be used in numerous CSS properties, such as background-image
, cursor
, 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
The <url>
data type is specified 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).
If you choose to write the URL without quotes, use a backslash (\) before any parentheses, whitespace characters, single quotes (') and double quotes (") that are part of the URL.
<a_css_property>: url("http://mysite.example.com/mycursor.png") <a_css_property>: url('http://mysite.example.com/mycursor.png') <a_css_property>: url(http://mysite.example.com/mycursor.png)
Examples
A url used in the backgroun property
.topbanner {
background: url("topbanner.png") #00D no-repeat fixed;
}
A url loading an image as a list bullet
ul {
list-style: square url(http://www.example.com/redball.png);
}
Specifications
Specification | Status | Comment |
---|---|---|
CSS Values and Units Module Level 4The definition of '<url>' in that specification. | Editor's Draft | |
CSS Values and Units Module Level 3The 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 1The definition of '<url>' in that specification. | Recommendation | Initial definition. |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Update compatibility data on GitHub
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
<url>
|
Chrome
Full support 1 |
Edge
Full support 12 |
Firefox
Full support 1 |
IE
Full support 3 |
Opera
Full support 3.5 |
Safari
Full support 1 |
WebView Android
Full support 1 |
Chrome Android
Full support 18 |
Firefox Android
Full support 4 |
Opera Android
Full support 14 |
Safari iOS
Full support 1 |
Samsung Internet Android
Full support 1.0 |
Legend
- Full support
- Full support
See also
<url> by Mozilla Contributors is licensed under CC-BY-SA 2.5.