CSS url() Function

The CSS url() function allows you to link to a resource, such as an image, web font, a filter, etc.

The url() function accepts a url value as its parameter. This specifies the location of the file.

Here's an example:

You can also surround the URL with single or double quotes. So all of the following are valid:

Here's an example of using the url() function within the background-image property to set a background image for the body element:

You can also use url() functional notation within the @font-face at-rule to specify the location of the font file:

Sometimes url() is Optional

There are some cases where the url() functional notation is optional. For example, when using the @import rule, you have the option of omitting the url() function, and therefore just providing a string for the URL.

So both of these are valid and import the same file:

Absolute vs Relative URLs

You can use an absolute URL, relative URL, or root-relative URL as the parameter. So all of the following are valid:

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() function is defined in CSS2 (W3C Recommendation 07 June 2011)
• It is also defined in Cascading Style Sheets, level 1 (W3C Recommendation 17 Dec 1996)
• The url data type is defined in CSS Values and Units Module Level 3 (W3C Candidate Recommendation, 29 September 2016)