CSS Data Type - <image>

---

---

The CSS data type <image> signifies a two-dimensional image.

The data type <image> can be denoted by any of the following values:

• An image defined by the url() data type

• A <gradient> data type

• A part of the webpage, defined by the element() function

• An image, image fragment or solid patch of color, defined by the image() function

• A blending of two or more images defined by the cross-fade() function.

• A selection of images chosen based on resolution defined by the image-set() function

Syntax

<image> = <url> | <image-list> | <element-reference>  | <gradient></gradient>

Following kinds of images can be handled by CSS:

• All images with intrinsic dimensions, i.e., one having natural size, such as a JPEG, PNG, or other images of raster format.

• All images with multiple intrinsic dimensions, existing in many versions inside a single file

• All images with no intrinsic dimensions, but with an intrinsic aspect ratio between its width and height, such as an SVG or other images of vector format.

• All images with neither intrinsic dimensions, nor an intrinsic aspect ratio, such as a CSS gradient.

An object's concreate size is determined using:

• intrinsic dimensions

• specified size, defined by CSS properties such as width, height, or background-size

• default size, determined by the type of property the image is used with.

Following table shows the type of image based on the CSS property:

CSS <image> - Calculation Image Size

The concrete size of an image is defined or calculated based on following algorithm:

• When the specified size defines the width and height both, these values are useful in determining the concrete size of an object.

• When the specified size defines only the width or only the height, the value that is missing is determined using the intrinsic ratio, in case it is available; the intrinsic dimensions if the specified value matches, or the default size of the object for that missing value.

• When the specifies size defines neither the width nor the height, the size of the object is measured such that it matches the intrinsic aspect ratio of the image, without exceeding the size in any dimension. In case the image has no intrinsic aspect ratio, the intrinsic aspect ratio of the object it applies to is used. For instance, if the object also has none intrinsic aspect ratio, the missing width or height is taken from the default object size.

Accessibility concerns: The assistive technologies are not provided with any special information on the background images by the browsers. This is of importance in the case of screen readers, as nothing will be announced by a screen reader regarding the presence of a background image, thus conveying nothing about them. In case the image contains some critical information for understanding of the overall page, it will be missed. Hence, it is advised to describe the important information semantically in the document.

<image> = <url> | <gradient>

/* Valid images */
url(sample.jpg)                                 /* A <url>, as long as sample.jpg is an actual image. */

linear-gradient(red, yellow)                    /* A <gradient> */

element(#realid)                                /* A part of the webpage, referenced with the element() function,
                                                if "realid" is an existing ID on the page. */

cross-fade(20% url(test.png), url(test1.png))   /* cross faded images, with test being 20% opaque
                                                and test1 being 80% opaque. */

image-set('test.jpg' 1x, 'test-2x.jpg' 2x)      /* A selection of images with varying resolutions. */

/*Invalid images */
sample.jpg                                      /* An image file must be defined using url() function. */

url(test.pdf)                                   /* A file pointed by the url() function must be an image. */

element(#fakeid)                                /* An element ID must be an existing ID on the page. */

image(z.jpg#xy=0,0)                             /* The spatial fragment must be written in the format of xywh=#,#,#,# */

image-set('test1.jpg' 1x, 'test2.jpg' 1x)       /* every image in an image set must have a different resolutions */

CSS <image> - Used With url()

The following example demonstrates the use of <image> data type to define an image using url() function. The image is used as a background via the CSS property background-image:

<html>
<head>
<style>
   div {
      background-image: url(images/border.png);
      width: 200px;
      height: 200px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <div></div>
</body>
</html>

In the example above, the url() function is used, which in turn uses the data type <image> to set the image as background for the div element.

CSS <image> - Used With linear-gradient()

The following example demonstrates the use of <image> data type to define an image using linear-gradient() function. The image is used as a background via the CSS property background-image:

<html>
<head>
<style>
   div {
      background-image: linear-gradient(red, yellow, blue, green, pink);
      width: 200px;
      height: 200px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <div></div>
</body>
</html>

In the example above, the linear-gradient() function is used, which in turn uses the data type <image> to set the image as background for the div element.

CSS <image> - Used With cross-fade()

The following example demonstrates the use of <image> data type to define an image using cross-fade() function. The image is used as a background via the CSS property background-image:

<html>
<head>
<style>
   div {
      background-image: -webkit-cross-fade(url(images/border.png), url(images/tree.jpg), 25%);
      background-image: cross-fade(url(images/border.png), url(images/tree.jpg), 25%);
      width: 300px;
      height: 300px;
      border: 3px solid black;
   }
</style>
</head>
<body>
   <div></div>
</body>
</html>

In the example above, the cross-fade() function is used, which in turn uses the data type <image> to set the blend of the images as background for the div element.