Tutorial 14 of 44 in series

CSS url()

Use URLs in CSS properties

Abhishek Sharma 2026-05-30 Web Development / Frontend / CSS

32%

url()

The url() function is used to reference external resources like images, fonts, and SVGs.

Demo: url() Examples

HTML

<div class="bg-image">Background image</div>
<div class="bg-svg">SVG background</div>

CSS

div { padding: 32px 16px; margin: 4px 0; border-radius: 6px; color: white; font-weight: bold; text-align: center; }
.bg-image {
background: url("https://images.unsplash.com/photo-1557683316-973673baf926?w=400&h=100&fit=crop") center/cover;
}
.bg-svg {
background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22%236366f1%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3C/svg%3E") repeat;
background-size: 40px;
background-color: #1e293b;
}

Live Output Window

Where url() Is Used

Property	Example
`background-image`	`background-image: url("bg.png");`
`list-style-image`	`list-style-image: url("bullet.svg");`
`border-image`	`border-image: url("border.png");`
`cursor`	`cursor: url("custom.cur"), auto;`
`@font-face`	`src: url("font.woff2");`

Relative vs Absolute URLs

/* Relative - resolves relative to the CSS file */
background: url("images/bg.png");

/* Absolute - full URL */
background: url("https://cdn.example.com/bg.png");

Always use quotes around the URL for clarity, though they are technically optional.

Keep learning

Related tutorials from across the library.

All tutorials

Tutorial2026-05-30

Introduction to CSS

Learn what CSS is and why it matters

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

History of CSS

Understand how CSS evolved

Web Development / Frontend / CSS

CSSWeb Development

Tutorial2026-05-30

Adding CSS

Three ways to add CSS to a page

Web Development / Frontend / CSS

CSSWeb Development