CSS url() Function

View Output

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