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 exact syntax of the image() function depends on the specfication you use (Level 3 or Level 4). Note that Level 3 is at Candidate Recommendation status and Level 4 is still in Working Draft status, so the following information could change.

Level 3 Syntax

CSS Image Values and Replaced Content Module Level 3 (W3C Candidate Recommendation) specifies this syntax:

Explanation of these values:

image-decl

url

Specifies an image as a valid url value.

string

Specifies an image as a valid string value.

element-reference

This option allows you to specify another element to be used as the image, based on its ID selector. This is done with the element() function.

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.

Level 4 Syntax

CSS Image Values and Replaced Content Module Level 4 (W3C Working Draft) 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 3 (W3C Candidate Recommendation 17 April 2012)
• It's also being further defined in CSS Image Values and Replaced Content Module Level 4 (W3C Working Draft 11 September 2012)