CSS url()

Learn how to use the CSS url() function

When we talk about background images,@import, And more, we useurl()The function of loading resources:

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

In this case, I used a relative URL, which searches for files in the folder where the CSS files are defined.

I can go up one level

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

Or enter the folder

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

Or, I can load the file from the root directory of the domain hosting the CSS:

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

Or, I can load external resources using absolute URLs:

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

Download mine for freeCSS Manual