CSS <image> Data Type

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS <image> data type represents 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.

Here is a brief description of each type of image data that can be used with the <image> data type:

URL reference: This is the most common way to specify an image in CSS. Simply provide the URL of the image file, and the browser will download and display the image.
Image notation: This allows you to specify an image directly in your CSS code. This can be useful for small images or for creating custom images.
Gradient notation: This allows you to create gradient images using CSS. Gradient images are images that have a smooth transition between two or more colors.

The <image> data type can be used in a variety of CSS properties, such as the background-image, border-image, and content properties. For example, the following CSS code will set the background of the <body> element to the image my-image.jpg:

body {
  background-image: url(my-image.jpg);
}

The <image> data type is a powerful tool for adding images to your web pages. It allows you to specify images in a variety of ways, and it can be used in a variety of CSS properties.

Here are some examples of how to use the <image> data type in CSS:

To set the background image of an element, use the background-image property.
To set the border image of an element, use the border-image property.
To create a gradient image, use the linear-gradient() or radial-gradient() functions.
To create an image mask, use the mask-image property.
To create a clipping mask, use the clip-path property.

You can also use the <image> data type in CSS animations and transitions. For example, the following CSS code will fade in an image over 2 seconds:

.image {
  opacity: 0;
  transition: opacity 2s;
}

.image:hover {
  opacity: 1;
}

The <image> data type is a versatile and powerful tool for adding images to your web pages. By learning how to use it, you can create more visually appealing and engaging websites.

Syntax

property: <image>;

Values

<image>Represents a reference to an image file.

Example

HTML

<div></div>

CSS

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

Result

Editor

Browser Support

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

Desktop

12	1	1	2	1

Tablets / Mobile

18	4	11	1	1	4.4

Last updated by CSSPortal on: 7th October 2023

Support Us