CSS <image> Data Type

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <image> CSS data type represents a reference to an image resource that can be used in various CSS properties to display graphical content. This type encompasses multiple formats, including raster images like PNG, JPEG, GIF, and SVG images. The <image> data type allows developers to specify an external or inline image that will be rendered in the browser. Common CSS properties that accept <image> include background-image, list-style-image, and content, providing flexibility in visual presentation.

When using <image>, you can refer to images through URLs, including relative paths, absolute paths, or data URIs. Inline images using data URIs are especially useful for embedding small graphics directly into stylesheets without additional network requests. This capability ensures that images can be used consistently in various contexts, such as icons in pseudo-elements or decorative backgrounds.

A key feature of the <image> type is that it can accept gradients or patterns in certain contexts. For instance, the background-image property can use CSS gradients as a valid <image> value, which allows combining photographic content and programmatically generated visuals. However, it’s important to note that not all <image> values are supported across every property, so checking property-specific documentation is crucial.

Code examples:

/* Using a raster image as a background */
div.hero {
  background-image: url('images/hero.jpg');
  background-size: cover;
  background-position: center;
}

/* Using an SVG image as content in a pseudo-element */
button::before {
  content: url('icons/check.svg');
  margin-right: 8px;
}

/* Using a linear gradient as an <image> value */
div.banner {
  background-image: linear-gradient(to right, #ff7e5f, #feb47b);
}

In these examples, <image> demonstrates its versatility, allowing both external files and generated images to enhance visual design. It can also interact with layout properties like background-size or background-repeat to control rendering and positioning.

Syntax

property: <image>;

Values

<image>Represents a reference to an image file.

Example

HTML

<div class="wrapper">

  <h1>CSS &lt;image&gt; examples</h1>

  <div class="grid">

    <figure class="card card-url">

      <figcaption>url()  -  raster image</figcaption>

    </figure>

    <figure class="card card-gradient">

      <figcaption>linear-gradient()  -  generated image</figcaption>

    </figure>

    <figure class="card card-mixed">

      <figcaption>image-set() &amp; layered &lt;image&gt;</figcaption>

    </figure>

  </div>

</div>

CSS

/* Styles for the demo */
* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  margin: 24px;
  background: #f5f7fa;
  color: #111;
}
.wrapper h1 {
  font-size: 20px;
  margin: 0 0 12px 0;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
.card {
  height: 180px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  color: #fff;
  box-shadow: 0 6px 18px rgba(20,30,40,0.08);
  background-color: #ddd;
}
.card figcaption {
  position: relative;
  z-index: 1;
  font-weight: 700;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45);
}
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Example 1: url()  -  classic raster image as a  value */
.card-url {
  background-image: url('https://picsum.photos/id/1015/800/600');
  background-size: cover;
  background-position: center;
}

/* Example 2: linear-gradient()  -  an image generated by CSS */
.card-gradient {
  background-image: linear-gradient(135deg, rgba(72,123,247,0.95), rgba(95,46,234,0.9));
}

/* Example 3: image-set() and layering  -  multiple  values combined */
.card-mixed {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.16), rgba(0,0,0,0.5)), image-set(
    url('https://picsum.photos/id/1025/600/400') 1x,
    url('https://picsum.photos/id/1025/1200/800') 2x
  );
  background-size: cover;
  background-position: center;
}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS image data type. Hover over a browser icon to see the version that first introduced support for this CSS data type.