CSS <url> Data Type

The <url> CSS data type represents a reference to a resource, most commonly an image, font, or other external file that the browser can fetch and use. It is a fundamental type in CSS because it allows styles to link to external content dynamically, enabling rich visual design and flexible content management. The <url> type can accept both absolute URLs, like https://example.com/image.png, and relative URLs, which are resolved relative to the location of the CSS file or document.

When used with properties such as background-image, content, or src in @font-face rules, the <url> type allows the browser to fetch external resources and apply them in the context of the rendered page. Its usage is often wrapped with the url() function, which accepts a string containing the resource path. Quotes around the URL are optional, but recommended when the URL contains characters such as spaces or parentheses.

<url> values can be combined with other types, for example using multiple background images in background shorthand or fallbacks for fonts. Proper use of <url> ensures that resources load efficiently and that fallback strategies can be implemented if a resource fails to load. Additionally, URLs can point to images for pseudo-elements like ::before or ::after, making them highly versatile in creative CSS designs.

Code Examples

Background image using <url>:

body {
    background-image: url("images/background.jpg");
    background-size: cover;
}

Using <url> in @font-face:

@font-face {
    font-family: "CustomFont";
    src: url("fonts/customfont.woff2") format("woff2"),
         url("fonts/customfont.woff") format("woff");
}

Using <url> in content for pseudo-elements:

button::before {
    content: url("icons/arrow.svg");
    margin-right: 8px;
}

Relative vs Absolute URL:

/* Relative URL */
div {
    background-image: url("../images/pattern.png");
}

/* Absolute URL */
div {
    background-image: url("https://example.com/images/pattern.png");
}

In essence, the <url> data type is a versatile tool for linking CSS to external resources, making it indispensable for both visual styling and functional content delivery on the web.

<url> = url( <string> <url-modifier>* )

• <string>Represents a reference to a file or file fragment.

The following information will show you the current browser support for the CSS url data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.

This data type is supported by all modern browsers.

Desktop

Tablets & Mobile