CSS <url> Data Type

The CSS <url> data type is a pointer to a resource. The resource could be an image, a web font, a filter, or something else.

When you see <url> (including the < and >) anywhere in the CSS specifications, this refers to the fact that the value can be any valid URL.

URL stands for Uniform Resource Locator. Basically, you use this to point to a file on the web. When you do this, you specify the resource by using functional notation.

Here's an example of using the background-image property to specify the location of a background image:

The double quotes are optional. And you can also use single quotes. So all of the following declarations are valid:

You can specify the same resource by using a relative URL, an absolute URL, or a root-relative URL. Here are examples of all three:

Here's a working example:

<style>
  div {
    background-image: url(/pix/samples/18m.jpg);
    height: 200px;
  }
</style>
<div></div>

Official Syntax

The asterisk (*) indicates that the preceding group occurs zero or more times.

Explanation of the values below.

string: Specifies the URL as a valid string value.
url-modifier: This can be used to change the meaning or the interpretation of the URL somehow. The value is either an ident or a functional notation.

CSS Specifications

The <url> data type is defined in CSS Values and Units Module Level 3 (W3C Candidate Recommendation, 29 September 2016)
It is also defined in the Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (W3C Recommendation 07 June 2011)
It is also defined in Cascading Style Sheets, level 1 (W3C Recommendation 17 Dec 1996)