<url>

The <url> data type is a pointer to a resource. URL stands for “Uniform Resource Locator”. A URL represents a pointer (or link) to a resource, such as an image or a font, that is to be used by the property.

CSS properties that take a <url> value accept that value in a functional url() notation. That is, a pointer to a resource (for example, an image) can be passed to a property via the url() function, which accepts the location or pointer to that image as an argument.

For example, the background-image property used to specify a background image for an element, accepts a <url> value, like this:

.element {
    background-image: url('http://www.example.com/my-background.png');
}
                    

Note that in some CSS syntactic contexts (as defined by that context), a URL can be represented as a <string> rather than by <url>. An example of this is the @import rule, which can be used to import a style sheet into another one; in this case, the URL of the style sheet is passed over as a string (wrapped in quotes), and not inside a url() function. Example:

/* The URL is wrapped inside double quotes which 
makes it a <string> type, not a <url> type*/

@import "path/to/stylesheet/styles.css";
                    

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 URL 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. Some characters appearing in an unquoted URL, such as parentheses, white space characters, single quotes (‘) and double quotes (“), must be escaped with a backslash so that the resulting value is a valid <url> value. Single quotes inside a URL wrapped in single quotes must be escaped, and double quotes inside a URL wrapped in double quotes must also be escaped.

In addition to the background-image property, many other CSS properties take URL values, such as cursor and list-style, among others.

Trivia and Notes

The URL can be either absolute (full path to resource) or relative. Relative URLs are relative to the URL of the style sheet (and not to the URL of the web page). For example, if in the style sheet we are referencing an image with the URL url(image.png), the asset is assumed to be in the same directory as the style sheet itself and not, for instance, in the root directory of the page that is including the style sheet.

A url() function can also take in a data URI as a value. Data URIs can be used to embed images directly into a page. For example, you can add a background image to an element by passing an image data URI like so:

.my-element { 
  background: 
    url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)
    no-repeat
    left center;
}
                    

You can read more about data URIs in Data URIs explained by Nicholas C. Zakas.

What is the difference between URL and URI?

A URL is a URI. A URI (Uniform Resource Identifier) can be a URL (location) or a URN (name) of a resource.

In CSS3, since URNs are almost never used, a URL is represented by a url() functional notation which denotes a <url> data type, not the more generic <uri>, as previous versions of CSS denoted it.