CSS <image> Data Type

The CSS <image> value type denotes a 2D image. It can be a url reference, image notation, or gradient notation.

When you see <image> (including the < and >) anywhere in the CSS specifications, this refers to the fact that the value can be any valid image data type.

For example, the CSS specification states that the list-style-image property can contain one of the following values:

Which means that the list-style-image property can contain either <image> (i.e. a valid image), or the none keyword (i.e. no image).

But What is a Valid Image?

Here's the official syntax for the <image> data type:

What this means is that an <image> can be any one of the following:

<url>

This is the URL of an image file. It can be specified with the url() function. Example: url(myImage.png)

<image-list>

You can provide a list of images using the image() function. This allows you to provide fallback images in case the preferred image is unavailable or can't be decoded, etc. You can also specify a solid color using this method.

<element-reference>

This option allows you to specify another element to be used as the image, based on its ID selector. This is done with the element() function.

<gradient>

Allows you to specify a gradient to use for the image. The browser will create an image based on the gradient specifications you provide here. Gradients can be created using the linear-gradient, repeating-linear-gradient, radial-gradient, and repeating-radial-gradient functions.

And so your code could look like any of the following:

Here's a working example: