Tiled Vertical decorator
The tiled-vertical decorator can render three images, or subsections of images, vertically across an element. One image is placed on the top edge, another on the bottom edge, and the last is stretched or repeated across the middle.
The decorator renders across the padded area of its element.
Properties
Top image
These properties specify the top image. They behave similarly to the properties in the image decorator.
<name>-top-image-src
Value: | <string> |
Initial: | not defined |
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 |
Bottom image
These properties specify the bottom image. They behave similarly to the properties in the image decorator. If only one side is defined, the other will be the vertical mirror of it. At least one side must be defined.
<name>-bottom-image-src
Value: | <string> |
Initial: | not defined |
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 |
Center image
These properties specify the centre 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-image-s
- Shorthand for setting
<name>-top-image-s-begin
and<name>-top-image-s-end
. <name>-top-image-t
- Shorthand for setting
<name>-top-image-t-begin
and<name>-top-image-t-end
. <name>-top-image
- A shorthand property for setting
<name>-top-image-src
,<name>-top-image-s-begin
,<name>-top-image-t-begin
,<name>-top-image-s-end
and<name>-top-image-t-end
. <name>-bottom-image-s
- Shorthand for setting
<name>-bottom-image-s-begin
and<name>-bottom-image-s-end
. <name>-bottom-image-t
- Shorthand for setting
<name>-bottom-image-t-begin
and<name>-bottom-image-t-end
. <name>-bottom-image
- A shorthand property for setting
<name>-bottom-image-src
,<name>-bottom-image-s-begin
,<name>-bottom-image-t-begin
,<name>-bottom-image-s-end
and<name>-bottom-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
.