CSS image() Function

The CSS image() function allows you to specify an image with fallback options and annotations.

The image() function provides similar functionality to the url() function, with the added ability to do the following:

• use media fragments to clip out a portion of an image
• specify fallback images (in case the browser can't display the preferred image)
• use a solid color as an image (handy for fallback options)
• annotate an image with a directionality

Official Syntax

The image() function is currently defined in the CSS Image Values and Replaced Content Module Level 4 (W3C Working Draft). It specifies this syntax:

image-tags

These allow you to specify a directionality for the image. For example, if the image is an arrow that represents a bullet point that points into the content, you can use this setting to ensure the arrow always points the correct way, whether the text is LTR or RTL.

ltr

Specifies left to right. For example, image(ltr "arrow.png").

rtl

Specifies right to left. For example, image(rtl "arrow.png").

image-src

Specifies the source of the image.

url

Specifies an image as a valid url value.

string

Specifies an image as a valid string value.

color

Represents a solid-color image of the given color with no intrinsic dimensions. This color can be used as an ultimate fallback in the event that none of the specified images can be displayed.

CSS Specifications

• The image() function is defined in CSS Image Values and Replaced Content Module Level 4 (W3C Working Draft)
• It was originally proposed in CSS Image Values and Replaced Content Module Level 3 but was deferred to Level 4 prior to becoming a W3C Recommendation.

Browser Support

The following table provided by Caniuse.com shows the level of browser support for this feature.