Learn How to Work with the CSS url() Function

Learn How to Work with the CSS url() Function

The Uniform Resource Location (URL) function is a built-in function for including a file. This function takes an absolute URL, a relative URL, or a data URI as a parameter.

The url() can be included as a value for a couple of things like:

• Background-image
• border-image
• list-style-image
• content
• cursor
• border-image
• border-image-source
• src as part of a @font-face block
• and @counter-style/symbol can all be used with the url() function.

Syntax

url("address_of_file")

Parameters

The file address is the single parameter needed for this function. This file’s address may be either an absolute or relative URL, or URI of any resource needed. This resource may be a file or an image in the png, jpeg, gif, or even svg formats.

Types of URLs

When discussing background images, @import, and other topics, we use the url() function to load a resource. The url() function accepts a url value as its parameter. This specifies the location of the file.

Relative URLs

In this case I used a relative URL, which searches the file in the folder where the CSS file is defined. So if the asset (image.png) is in the same folder as the CSS file then it would find the image.

/* Relative URLs */
.hero {
  background-image: url("image.png");
}

I could go back one level, this could be useful if your images are stored outside of your CSS folder:

/* Relative URLs */
.hero {
  background-image: url("../image.png");
}

or go into a specific folder:

/* Relative URLs */
.hero {
  background-image: url("images/image.png");
}

Root-relative URLs

I could also load a file from the domain’s root, which is where the CSS is kept:

/* Root-relative URL */
.hero {
  background-image: url("/image.png");
}

Absolute URLs

Alternatively, I could load an external site by using an absolute URL:

/* Absolute URL */
.hero {
  background-image: url("https://www.pexels.com/photo/green-tree-on-grass-field-during-daytime-53435/");
}

An absolute URL contains the entire address from the protocol (HTTPS) to the domain name.

If you are looking for new images for your website, then I would recommend these two resources to find high-quality free stock images: Pexels and Unsplash.

Further reading

Want to learn some more about the aside element? Then check out – url() – CSS: Cascading Style Sheets | MDN

See also

What is CSS? Basics Explained
What are the 3 Ways to Style in CSS?
What are the Most Common CSS Units?

If you liked this article, then please share. You can also find me on Twitter for more updates.