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:

This is the URL of an image file. It can be specified with the url() function. Example: url(myImage.png)
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.
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.
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: