Understanding url() in CSS Backgrounds

The url() function in CSS is used to load external resources like images, fonts, or other files. Most commonly, it’s used with background-image to set a background for an element.

Basic Example

Code Block Loading...

Here, the browser looks for test.png in the same folder as your CSS file. But paths can vary depending on where your resource is located.

Types of URLs in CSS

  • Relative URL Looks in the same folder as the CSS file.

Code Block Loading...

  • Parent Folder (../) Moves one level up in the directory.

Code Block Loading...

  • Subfolder Path Goes inside a subfolder.

Code Block Loading...

  • Root Path (/) Starts from the root of the domain.

Code Block Loading...

  • Absolute URL Loads from an external site.

Code Block Loading...

Example

Code Block Loading...