The image decorator can render a single image or a rectangular subsection of a single image.

Properties

<name>-image-src

This property defines the name (and, for file sources, the relative path) of the source image.

<name>-image-s-begin, <name>-image-t-begin

<name>-image-s-end, <name>-image-t-end

These properties specify the texture coordinates to use when rendering the image.

Values

<number>

Expected to be a floating-point number from 0 to 1, this is the raw texture coordinate.

<length>

Expected to be expressed in ‘px’ units and from 0 to the length of the appropriate texture axis. The texture will be rendered from (for -begin) or to (for -end) this pixel.

<percentage>

The texture will be rendered from (for -begin) ot to (for -end) this far across the appropriate texture axis.

Shorthands

<name>-image-s

A shorthand property for setting <name>-image-s-begin and <name>-image-s-end.

<name>-image-t

A shorthand property for setting <name>-image-t-begin and <name>-image-t-end.

<name>-image

A shorthand property for setting <name>-image-src, <name>-image-s-begin, <name>-image-t-begin, <name>-image-s-end and <name>-image-t-end.

/* Declares an image decorator. */
div#avatar
{
	avatar-decorator: image;
	avatar-image: player.png 0px 32px 32px 64px;
}

The image will be stretched or shrunk to render across the entire padded area of an element it is attached to.