CSS <image> Data Type
<image> value type denotes a 2D image. It can be a url reference, image notation, or gradient notation.
When you see
<image> (including the
>) 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
- 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
- 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
And so your code could look like any of the following:
Here's a working example: