Tiled Box decorator
The tiled-box decorator can render nine images, or subsections of images, across an element. One image is placed in each of the element’s corners, one each stretched or tiled along the edges, and another stretched across the middle.
The decorator renders across the padded area of its element.
Properties
Top-left corner
These properties specify the top-left corner image. They behave similarly to the properties in the image decorator.
<name>-top-left-image-src
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
<name>-top-left-image-s-begin, <name>-top-left-image-t-begin
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
<name>-top-left-image-s-end, <name>-top-left-image-t-end
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
Top-right corner
These properties specify the top-right corner image. They behave similarly to the properties in the image decorator.
<name>-top-right-image-src
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
<name>-top-right-image-s-begin, <name>-top-right-image-t-begin
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
<name>-top-right-image-s-end, <name>-top-right-image-t-end
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
Bottom-left corner
These properties specify the bottom-left corner image. They behave similarly to the properties in the image decorator.
<name>-bottom-left-image-src
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
<name>-bottom-left-image-s-begin, <name>-bottom-left-image-t-begin
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
<name>-bottom-left-image-s-end, <name>-bottom-left-image-t-end
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
Bottom-right corner
These properties specify the bottom-right corner image. They and behave similarly to the properties in the image decorator.
<name>-bottom-right-image-src
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
<name>-bottom-right-image-s-begin, <name>-bottom-right-image-t-begin
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
<name>-bottom-right-image-s-end, <name>-bottom-right-image-t-end
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
Top edge
These properties specify the top edge image. They behave similarly to the centre properties in the tiled-horizontal decorator.
<name>-top-image-src
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
<name>-top-image-repeat
| Value: | stretch | clamp-stretch | clamp-truncate | repeat-stretch | repeat-truncate |
| Initial: | stretch |
| Percentages: | N/A |
<name>-top-image-s-begin, <name>-top-image-t-begin
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
<name>-top-image-s-end, <name>-top-image-t-end
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
Right edge
These properties specify the right edge image. They behave similarly to the centre properties in the tiled-vertical decorator.
<name>-right-image-src
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
<name>-right-image-repeat
| Value: | stretch | clamp-stretch | clamp-truncate | repeat-stretch | repeat-truncate |
| Initial: | stretch |
| 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 |
Bottom edge
These properties specify the bottom edge image. They behave similarly to the centre properties in the tiled-horizontal decorator.
<name>-bottom-image-src
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
<name>-bottom-image-repeat
| Value: | stretch | clamp-stretch | clamp-truncate | repeat-stretch | repeat-truncate |
| Initial: | stretch |
| Percentages: | N/A |
<name>-bottom-image-s-begin, <name>-bottom-image-t-begin
| Value: | <number> | <length> | <percentage> |
| Initial: | 0 |
| Percentages: | N/A |
<name>-bottom-image-s-end, <name>-bottom-image-t-end
| Value: | <number> | <length> | <percentage> |
| Initial: | 1 |
| Percentages: | N/A |
Left edge
These properties specify the left edge image. They behave similarly to the centre properties in the tiled-vertical decorator.
<name>-left-image-src
| Value: | <string> |
| Initial: | not defined |
| Percentages: | N/A |
<name>-left-image-repeat
| Value: | stretch | clamp-stretch | clamp-truncate | repeat-stretch | repeat-truncate |
| Initial: | stretch |
| 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 |
Center
These properties specify the center image. They behave similarly to the centre properties in the tiled-horizontal 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 |
Shorthands
<name>-top-left-image-s- Shorthand for setting
<name>-top-left-image-s-beginand<name>-top-left-image-s-end. <name>-top-left-image-t- Shorthand for setting
<name>-top-left-image-t-beginand<name>-top-left-image-t-end. <name>-top-left-image- A shorthand property for setting
<name>-top-left-image-src,<name>-top-left-image-s-begin,<name>-top-left-image-t-begin,<name>-top-left-image-s-endand<name>-top-left-image-t-end. <name>-top-right-image-s- Shorthand for setting
<name>-top-right-image-s-beginand<name>-top-right-image-s-end. <name>-top-right-image-t- Shorthand for setting
<name>-top-right-image-t-beginand<name>-top-right-image-t-end. <name>-top-right-image- A shorthand property for setting
<name>-top-right-image-src,<name>-top-right-image-s-begin,<name>-top-right-image-t-begin,<name>-top-right-image-s-endand<name>-top-right-image-t-end. <name>-bottom-left-image-s- Shorthand for setting
<name>-bottom-left-image-s-beginand<name>-bottom-left-image-s-end. <name>-bottom-left-image-t- Shorthand for setting
<name>-bottom-left-image-t-beginand<name>-bottom-left-image-t-end. <name>-bottom-left-image- A shorthand property for setting
<name>-bottom-left-image-src,<name>-bottom-left-image-s-begin,<name>-bottom-left-image-t-begin,<name>-bottom-left-image-s-endand<name>-bottom-left-image-t-end. <name>-bottom-right-image-s- Shorthand for setting
<name>-bottom-right-image-s-beginand<name>-bottom-right-image-s-end. <name>-bottom-right-image-t- Shorthand for setting
<name>-bottom-right-image-t-beginand<name>-bottom-right-image-t-end. <name>-bottom-right-image- A shorthand property for setting
<name>-bottom-right-image-src,<name>-bottom-right-image-s-begin,<name>-bottom-right-image-t-begin,<name>-bottom-right-image-s-endand<name>-bottom-right-image-t-end. <name>-top-image-s- Shorthand for setting
<name>-top-image-s-beginand<name>-top-image-s-end. <name>-top-image-t- Shorthand for setting
<name>-top-image-t-beginand<name>-top-image-t-end. <name>-top-image- A shorthand property for setting
<name>-top-image-src,<name>-top-image-repeat,<name>-top-image-s-begin,<name>-top-image-t-begin,<name>-top-image-s-endand<name>-top-image-t-end. <name>-right-image-s- Shorthand for setting
<name>-right-image-s-beginand<name>-right-image-s-end. <name>-right-image-t- Shorthand for setting
<name>-right-image-t-beginand<name>-right-image-t-end. <name>-right-image- A shorthand property for setting
<name>-right-image-src,<name>-right-image-repeat,<name>-right-image-s-begin,<name>-right-image-t-begin,<name>-right-image-s-endand<name>-right-image-t-end. <name>-bottom-image-s- Shorthand for setting
<name>-bottom-image-s-beginand<name>-bottom-image-s-end. <name>-bottom-image-t- Shorthand for setting
<name>-bottom-image-t-beginand<name>-bottom-image-t-end. <name>-bottom-image- A shorthand property for setting
<name>-bottom-image-src,<name>-bottom-image-repeat,<name>-bottom-image-s-begin,<name>-bottom-image-t-begin,<name>-bottom-image-s-endand<name>-bottom-image-t-end. <name>-left-image-s- Shorthand for setting
<name>-left-image-s-beginand<name>-left-image-s-end. <name>-left-image-t- Shorthand for setting
<name>-left-image-t-beginand<name>-left-image-t-end. <name>-left-image- A shorthand property for setting
<name>-left-image-src,<name>-left-image-repeat,<name>-left-image-s-begin,<name>-left-image-t-begin,<name>-left-image-s-endand<name>-left-image-t-end. <name>-center-image-s- Shorthand for setting
<name>-center-image-s-beginand<name>-center-image-s-end. <name>-center-image-t- Shorthand for setting
<name>-center-image-t-beginand<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-endand<name>-center-image-t-end.