The tiled-horizontal decorator can render three images, or subsections of images, horizontally across an element. One image is placed on the left edge, another on the right edge, and the last is stretched or repeated across the middle.

The decorator renders across the padded area of its element.

Properties

Left image

These properties specify the left image. They behave similarly to the properties in the image decorator.

<name>-left-image-src

Value:	<string>
Initial:	not defined
Percentages:	N/A

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

Value:	<number> | <length> | <percentage>
Initial:	0
Percentages:	N/A

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

Value:	<number> | <length> | <percentage>
Initial:	1
Percentages:	N/A

Right image

These properties specify the right image. They behave similarly to the properties in the image decorator. If only one side is defined, the other will be the horizontal mirror of it. At least one side must be defined.

<name>-right-image-src

Value:	<string>
Initial:	not defined
Percentages:	N/A

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

Value:	<number> | <length> | <percentage>
Initial:	0
Percentages:	N/A

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

Value:	<number> | <length> | <percentage>
Initial:	1
Percentages:	N/A

Center image

These properties specify the centre image. They behave similarly to the properties in the image decorator.

<name>-center-image-src

Value:	<string>
Initial:	not defined
Percentages:	N/A

<name>-center-image-repeat

Value:	stretch | clamp-stretch | clamp-truncate | repeat-stretch | repeat-truncate
Initial:	stretch
Percentages:	N/A

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

Value:	<number> | <length> | <percentage>
Initial:	0
Percentages:	N/A

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

Value:	<number> | <length> | <percentage>
Initial:	1
Percentages:	N/A

Values

stretch

The image will be stretched to fit the centre of the decorator.

clamp-stretch

The image will be clamped to the upper-left of the centre of the decorator. If the centre of the decorator is too small to fit the image, it will be scaled down to fit.

clamp-truncate

The image will be clamped to the upper-left of the centre of the decorator. If the centre of the decorator is too small to fit the image, it will be truncated.

repeat-stretch

The image will be repeated across the centre of the decorator. Any last repeat will be stretched across the remainder.

repeat-truncate

The image will be repeated across the centre of the decorator. The last repeat will be truncated.

Shorthands

<name>-left-image-s

Shorthand for setting <name>-left-image-s-begin and <name>-left-image-s-end.

<name>-left-image-t

Shorthand for setting <name>-left-image-t-begin and <name>-left-image-t-end.

<name>-left-image

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

<name>-right-image-s

Shorthand for setting <name>-right-image-s-begin and <name>-right-image-s-end.

<name>-right-image-t

Shorthand for setting <name>-right-image-t-begin and <name>-right-image-t-end.

<name>-right-image

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

<name>-center-image-s

Shorthand for setting <name>-center-image-s-begin and <name>-center-image-s-end.

<name>-center-image-t

Shorthand for setting <name>-center-image-t-begin and <name>-center-image-t-end.

<name>-center-image

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