CSS <url> Data Type
The CSS <url> data type represents a reference to a resource. URL values can identify images, fonts, filters, masks, and other resources used by CSS properties and functions.
Syntax
A URL is commonly written using the CSS url() function:
url("image.png")
url('image.png')
url(image.png)The resource address can be an absolute URL, a relative URL, or a fragment identifier, depending on the CSS feature using the value.
url() Function
The url() function provides a reference to a resource. It is commonly used by properties that load images, fonts, masks, and other external resources.
background-image: url("images/background.jpg");
list-style-image: url("images/marker.png");
cursor: url("images/cursor.cur"), auto;The type of resource expected depends on the property or descriptor where the URL is used.
Quoted and Unquoted URLs
The URL inside url() can often be written with single quotes, double quotes, or without quotes.
url("images/photo.jpg")
url('images/photo.jpg')
url(images/photo.jpg)Quoted URLs are generally easier to use when the URL contains characters that would require escaping in an unquoted URL. Using quotes consistently can also make URL values easier to read and maintain.
Relative and Absolute URLs
A relative URL identifies a resource relative to the location of the stylesheet containing the URL.
background-image: url("../images/background.jpg");An absolute URL includes enough information to identify the resource independently of the stylesheet's location.
background-image: url("https://www.example.com/images/background.jpg");For CSS declared in an external stylesheet, relative URLs are resolved relative to that stylesheet, not relative to the HTML document that uses it.
Fragment URLs
A URL can contain a fragment identifier beginning with #. Fragment URLs can reference an element or resource defined within a document, such as an SVG filter, mask, or clipping path.
filter: url("#shadow-filter");
clip-path: url("#clip-shape");
mask: url("#example-mask");The meaning of the referenced fragment depends on the CSS property and the type of resource identified by the URL.
<url> Examples
URL values are used by many CSS features to reference different types of resources:
| CSS Feature | Example |
|---|---|
| Background image | url("images/background.jpg") |
| List marker | url("images/marker.png") |
| Cursor | url("images/cursor.cur") |
| Web font | url("fonts/example.woff2") |
| SVG filter | url("#example-filter") |
| Mask image | url("images/mask.svg") |
The following example uses a URL to load a background image:
.url-example {
background-image: url("images/background.jpg");
}Related CSS Properties
The <url> data type can be used by many CSS properties and descriptors that reference external or document resources, including:
Specifications
The <url> data type is defined in the CSS Values and Units Module Level 4 .