CSS url() Function
url() function allows you to link to a resource, such as an image, web font, a filter, etc.
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:
You can also use
url() functional notation within the
@font-face at-rule to specify the location of the font file:
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:
The asterisk (
*) indicates that the preceding group occurs zero or more times.
Explanation of the values below.
- Specifies the URL as a valid string value.
- 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.