← flaviocopes.com

CSS url()

Published May 04 2019

Psssst! The 2023 WEB DEVELOPMENT BOOTCAMP is starting on FEBRUARY 01, 2023! SIGNUPS ARE NOW OPEN to this 10-weeks cohort course. Learn the fundamentals, HTML, CSS, JS, Tailwind, React, Next.js and much more! ✨

When we talk about background images, @import, and more, we use the url() function to load a resource:

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

In this case I used a relative URL, which searches the file in the folder where the CSS file is defined.

I could go one level back

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

or go into a folder

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

Or I could load a file starting from the root of the domain where the CSS is hosted:

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

Or I could use an absolute URL to load an external resource:

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

I write books for developers 👇🏼