CSS url() Function – Definition, Syntax | CSS url Image Path | Examples for Absolute, Relative URL() Function in CSS

url() css: If we are talking about background images, we can use @import. CSS has a wide range of properties that can reference an image file, display that file on the image as a part of the element’s background. Of all those, we use CSS Image Syntax url() to load up a resource. From this tutorial, you will find the full details about the CSS URL() function like definition, syntax, supported browsers, properties that accept URL as a Value, and example programs.

CSS url() Function

CSS url function: To include a file, we use the inbuilt function ie., url() CSS function. The parameter is an absolute URL, a relative URL, or a data URL. The url() function can be passed as a parameter of another CSS function, like the attr() function. Based on the property for which it is a value, the resource queried can be an image, font, or stylesheet. The url() functional representation is the value for the <url> data type.

Syntax

url( <string> <url-modifier>* )

css url: String indicates the URL or ID of an SVG Shape. (*) asterisk denotes that the preceding group occurs zero or more times.

<URL> 

css url(): An URL is a relative or Absolute Address or Pointer for which the web resource is included or a data uri in single or double-quotes. Quotes are necessary if an URL includes Parentheses, whitespace, or quotes unless these characters are escaped, or if addresses include control characters above 0x7e. Double Quotes can’t occur inside double quotes and single quotes can’t occur within single quotes unless escaped.

If you want to write an URL without Quotes, you can use a backslash(\) before any paratheses, whitespace characters or single quotes, double quotes that are part of the URL.

Path

It References SVG Shape’s ID — circle, ellipse, line, path, polygon, polyline, or rect by using the shape’s geometry as the path.

<url-modifier>

In the coming future url() function can support specifying a modifier, functional notation, or identifier that alters the URL String Meaning. As of now, it is not fully defined and supported.

Parameters

This function allows a single parameter url that holds the url in string format. The following examples of url are such as:

<css_property>: url("https://btechgeeks.com/image.png")
<css_property>: url('https://btechgeeks.com/image.png')
<css_property>: url(https://betchgeeks.com/image.png)

Values

The url() function can be added as a value for background, background-image, list-style, list-style-image,content, cursor, border, border-image,border-image-source, mask, mask-image, src in the context of a @font-face block, and @counter-style/symbol

Some times url() is Optional

At times, url() functional notation is optional. For suppose when you use the @import rule, you can omit the URL() and simply provide a <string> for the url.

Absolute Vs Relatieve URL

You can choose between Absolute URL, Relative URL, and Root-Relative URL as the Parameter as all of them are valid.

/* Absolute URL */
background-image: url(http://www.btechgeeks.com/images/image.png);
​
/* Relative URLs */
background-image: url(image.png);
background-image: url(../images/image.png);
​
/* Root-relative URL */
background-image: url(/images/image.png);

Also Check:

Supported Browsers

The browsers supported by url() function are as follows:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Properties that accept URL as a Value

  • background-image
  • border-image
  • content
  • list-style-image

Usage of CSS url() function in Filter

If you use an URL as a path for filter the URL needs to meet the following criteria and they are as below

  • The Path to an SVG File should be appended with filter ID.
  • Should consist ID of the filter if an SVG already exists on the page.
.blur {
filter: url(my-file.svg#svg-blur); /* the URL of an SVG file used as a filter */
}

.inline-blur {
filter: url(#svg-blur); /* the ID of an SVG that is embedded in the HTML page */
}

Examples using url() in CSS

section {
  background-image: url(picture.png);
}

This is a relative URL which means that it will search for the file inside the same folder.

Relative url() Usage in CSS

We can go back to one folder:

section { 
    background-image: url(../picture.png); 
}

Or can go into a folder

section { 
    background-image: url(someFolder/picture.png); 
}

Or can directly load from the root folder of the CSS

section { 
    background-image: url(/picture.png); 
}

Or we can directly fetch from some website

section { 
    background-image: url(https://example.com/picture.png); 
}

Example of Usage in the Content Property

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS

li::after {
  content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif);
}

OUTPUT

css url() function example result