CSS url()
New Course Coming Soon:
Get Really Good at Git
Learn how to work with the CSS url() function
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);
}
→ Get my CSS Handbook
→ Read my CSS Tutorial on
The Valley of Code
Here is how can I help you:
- COURSES where I teach everything I know
- CODING BOOTCAMP cohort course - next edition in 2025
- BOOKS 16 coding ebooks you can download for free on JS Python C PHP and lots more
- Follow me on X