The CSS url() Function: Working with Background Images and More

In CSS, the url() function is used to load resources like background images or imported files. Understanding how to use this function correctly is essential in web development. In this article, we will explore the different ways to use the url() function effectively.

Using Relative URLs

To load a resource from a relative URL, you specify the file location relative to the CSS file’s location. For example, let’s say we have a CSS file and a test image called “test.png” in the same folder. We can use the following code to set the background image of a div:

div {
    background-image: url(test.png);
}

If the image is stored in a folder one level back, we can go back by using ../:

div {
    background-image: url(../test.png);
}

Similarly, if the image is stored in a subfolder, we can navigate to the subfolder by specifying the folder name:

div {
    background-image: url(subfolder/test.png);
}

Using Absolute URLs

Using an absolute URL allows us to load resources from any location on the web. The CSS file’s location or the domain doesn’t matter. To load a file from the root of the domain where the CSS is hosted, simply prepend a forward slash before the file path:

div {
    background-image: url(/test.png);
}

Alternatively, we can use an absolute URL to load an external resource. This is useful when we want to load images from a different website or a CDN:

div {
    background-image: url(https://mysite.com/test.png);
}

By understanding the different ways to use the url() function in CSS, you can seamlessly load resources and enhance the visual appeal of your webpages.