CSS <url> Data Type


In CSS, the <url> type represents a reference to a Uniform Resource Locator (URL) or a web address. It is used to specify the location of external resources, such as images, fonts, or other files, that a web page or stylesheet needs to display or apply styles correctly.

The <url> type is often used within CSS properties like background-image, font-face, or @import to link to these external resources. When defining a <url>, you typically enclose it in either single or double quotation marks, like so:

background-image: url('image.jpg');
font-family: 'CustomFont', Arial, sans-serif;
@import url('styles.css');

In these examples, <url> points to the respective image file, font file, or external stylesheet by specifying their locations on the web, allowing web designers and developers to enhance the visual and functional aspects of their web pages through the inclusion of external resources.


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


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


div {
   width: 300px;
   height: 226px;
   background-image: url('images/sunset.jpg');
   margin: 10px;

Browser Support

The following table will show you the current browser support for the CSS url data type.

Edge Chrome Firefox Opera Safari
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview

Last updated by CSSPortal on: 7th October 2023