🔗 url() — Loading External Resources in CSS

🌐 What is the url() Function?

The url() CSS function is used to load external resources such asimages, fonts, videos, cursors, and SVG files directly in your styles. It’s one of the core building blocks in CSS for linking external assets.

>>“url() connects CSS to the outside world — images, fonts, SVGs, and more.”

Note

✔ Works in all browsers
✔ Accepts absolute, relative, and data URLs
✔ Can include quotes or be unquoted

🎯 Why Use url()?

  • To load background images
  • To include custom fonts (via @font-face)
  • To add list-style images
  • To change the mouse pointer (cursor)
  • To embed SVGs and patterns

📌 Syntax

url() Syntax

url(<path-to-resource>)

You can use quotes or omit them:

Quoted & Unquoted

url('image.png')
url("image.png")
url(image.png)

🖼️ Example 1 — Background Image

Background Image

.banner {
  background-image: url('images/hero.jpg');
  background-size: cover;
}

🪪 Example 2 — @font-face with url()

Loading Custom Fonts

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/myfont.woff2') format('woff2');
}

body {
  font-family: 'MyFont';
}

url() is essential for importing custom fonts locally.

🧵 Example 3 — SVG Icons with url()

SVG Background Icon

.icon {
  background: url('icons/user.svg') no-repeat center;
  width: 24px;
  height: 24px;
}

SVGs scale perfectly at any resolution — great for modern UIs.

🖱️ Example 4 — Custom Mouse Cursor

Cursor Example

button {
  cursor: url('cursor.cur'), pointer;
}

If the custom cursor fails, CSS falls back to pointer.

📑 Example 5 — List Style Image

List Image

ul {
  list-style-image: url('check.svg');
}

🎨 Example 6 — Mask Images

Mask Example

.mask {
  mask-image: url('shapes/circle.png');
}

Masks allow advanced clipping and reveal effects.

📐 Relative vs Absolute Paths

TypeExampleMeaning
Relative Pathurl('../assets/bg.jpg')Relative to the CSS file
Absolute Pathurl('/images/logo.png')Starts from website root
Full URLurl('https://example.com/bg.png')Loads from external site

Note

⚠️ Always optimize image paths when deploying large projects.

🧪 Data URLs (Inline Images)

You can embed an entire image directly inside CSS using data URLs.

Data URL Example

.logo {
  background-image: url('data:image/svg+xml,<svg>...</svg>');
}

Note

✔ No extra HTTP request
⚠️ But increases CSS file size

🎯 Using url() with CSS Variables

Dynamic URLs

:root {
  --bg: url('light.jpg');
}

.dark {
  --bg: url('dark.jpg');
}

.banner {
  background-image: var(--bg);
}

Great for theme switching or dynamic UIs.

⚠️ Common Mistakes

  • ❌ Incorrect relative paths (most common error)
  • ❌ Using url("") with spaces or unescaped characters
  • ❌ Expecting url() to load blocked remote resources (CORS errors)
  • ❌ Confusing CSS path resolution with HTML path resolution

Note

🧠 url() paths resolve relative to the **CSS file**, not the HTML file (unless using inline CSS).

🔥 Summary

The url() function is one of CSS’s most essential tools for linking external resources. Whether you're loading images, fonts, cursors, or SVGs, url() makes styles richer, more visual, and more interactive.

>>“Whenever CSS needs to fetch something — url() is the gateway.”

Learn more →MDN Docs 📘