Decorators

Author:: peterc (IP: 203.96.63.172)
Timestamp:: 04/03/08 13:18:09 (9 years ago)
Comment:: --

Legend:

: Unmodified
: Added
: Removed
: Modified

documentation/RCSS/Decorators

v2	v3
60	60	}}}
61	61
62		an 'image' decorator is declared, called 'icon'. On this decorator, the properties 'image-src' is set to '../images/header_arrow.png' and ~~the~~ 'image-s-begin' is set to '5px'. The other properties in the 'image' specification are left to their defaults.
	62	an 'image' decorator is declared, called 'icon'. On this decorator, the properties 'image-src' is set to '../images/header_arrow.png' and 'image-s-begin' is set to '5px'. The other properties in the 'image' specification are left to their defaults.
63	63
64	64	The decorator properties behave like other properties, so are subject to precedence and the cascade. For example, if the following RCSS was loaded after the previous example:
153	153
154	154	Rocket comes with several built-in decorators for displaying images and tiled images behind elements.
155
156		=== The 'image' decorator ===
157
158		The 'image' decorator can render a single image or a rectangular subsection of a single image. It has the following properties:
159
160		''image-src''
161		\|\| ''Value:'' \|\| <string> \|\|
162		\|\| ''Initial:'' \|\| not defined \|\|
163		\|\| ''Percentages:'' \|\| N/A \|\|
164
165		This property defines the name (and, for file sources, the relative path) of the source image.
166
167		''image-s-begin'', ''image-t-begin''
168		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
169		\|\| ''Initial:'' \|\| 0 \|\|
170		\|\| ''Percentages:'' \|\| N/A \|\|
171
172		''image-s-end'', ''image-t-end''
173		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
174		\|\| ''Initial:'' \|\| 1 \|\|
175		\|\| ''Percentages:'' \|\| N/A \|\|
176
177		These values specify the texture coordinates to use when rendering the image. Values have the following meanings:
178
179		number::
180		Expected to be a floating-point number from 0 to 1, this is the raw texture coordinate.
181		length::
182		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.
183		percentage::
184		The texture will be rendered from (for -begin) ot to (for -end) this far across the appropriate texture axis.
185
186		''image-s''[[BR]]
187		A shorthand property for setting ''image-s-begin'' and ''image-s-end''.
188
189		''image-t''[[BR]]
190		A shorthand property for setting ''image-t-begin'' and ''image-t-end''.
191
192		''image''[[BR]]
193		A shorthand property for setting ''image-src'', ''image-s-begin'', ''image-t-begin'', ''image-s-end'' and ''image-t-end''.
194
195		{{{
196		/* Declares an image decorator. */
197		div#avatar
198		{
199		avatar-decorator: image;
200		avatar-image: player.png 0px 32px 32px 64px;
201		}
202		}}}
203
204		The image will be stretched or shrunk to render across the entire padded area of an element it is attached to.
205
206		=== The 'tiled-horizontal' decorator ===
207
208		The 'horizontal-tiled' 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.
209
210		''left-image-src''
211		\|\| ''Value:'' \|\| <string> \|\|
212		\|\| ''Initial:'' \|\| not defined \|\|
213		\|\| ''Percentages:'' \|\| N/A \|\|
214
215		''left-image-s-begin'', ''left-image-t-begin''
216		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
217		\|\| ''Initial:'' \|\| 0 \|\|
218		\|\| ''Percentages:'' \|\| N/A \|\|
219
220		''left-image-s-end'', ''left-image-t-end''
221		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
222		\|\| ''Initial:'' \|\| 1 \|\|
223		\|\| ''Percentages:'' \|\| N/A \|\|
224
225		These properties specify the left image. They behave similarly to the properties in the 'image' decorator.
226
227		''right-image-src''
228		\|\| ''Value:'' \|\| <string> \|\|
229		\|\| ''Initial:'' \|\| not defined \|\|
230		\|\| ''Percentages:'' \|\| N/A \|\|
231
232		''right-image-s-begin'', ''right-image-t-begin''
233		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
234		\|\| ''Initial:'' \|\| 0 \|\|
235		\|\| ''Percentages:'' \|\| N/A \|\|
236
237		''right-image-s-end'', ''right-image-t-end''
238		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
239		\|\| ''Initial:'' \|\| 1 \|\|
240		\|\| ''Percentages:'' \|\| N/A \|\|
241
242		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.
243
244		''center-image-src''
245		\|\| ''Value:'' \|\| <string> \|\|
246		\|\| ''Initial:'' \|\| not defined \|\|
247		\|\| ''Percentages:'' \|\| N/A \|\|
248
249		''center-image-repeat''
250		\|\| ''Value:'' \|\| stretch \| clamp-stretch \| clamp-truncate \| repeat-stretch \| repeat-truncate \|\|
251		\|\| ''Initial:'' \|\| stretch \|\|
252		\|\| ''Percentages:'' \|\| N/A \|\|
253
254		Values have the following meanings:
255
256		stretch::
257		The image will be stretched to fit the centre of the decorator.
258		clamp-stretch::
259		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.
260		clamp-truncate::
261		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.
262		repeat-stretch::
263		The image will be repeated across the centre of the decorator. Any last repeat will be stretched across the remainder.
264		repeat-truncate::
265		The image will be repeated across the centre of the decorator. The last repeat will be truncated.
266
267		''center-image-s-begin'', ''center-image-t-begin''
268		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
269		\|\| ''Initial:'' \|\| 0 \|\|
270		\|\| ''Percentages:'' \|\| N/A \|\|
271
272		''center-image-s-end'', ''center-image-t-end''
273		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
274		\|\| ''Initial:'' \|\| 1 \|\|
275		\|\| ''Percentages:'' \|\| N/A \|\|
276
277		These properties specify the centre image. They behave similarly to the properties in the 'image' decorator.
278
279		''left-image-s''[[BR]]
280		Shorthand for setting ''left-image-s-begin'' and ''left-image-s-end''.
281
282		''left-image-t''[[BR]]
283		Shorthand for setting ''left-image-t-begin'' and ''left-image-t-end''.
284
285		''left-image''[[BR]]
286		A shorthand property for setting ''left-image-src'', ''left-image-s-begin'', ''left-image-t-begin'', ''left-image-s-end'' and ''left-image-t-end''.
287
288		''right-image-s''[[BR]]
289		Shorthand for setting ''right-image-s-begin'' and ''right-image-s-end''.
290
291		''right-image-t''[[BR]]
292		Shorthand for setting ''right-image-t-begin'' and ''right-image-t-end''.
293
294		''right-image''[[BR]]
295		A shorthand property for setting ''right-image-src'', ''right-image-s-begin'', ''right-image-t-begin'', ''right-image-s-end'' and ''right-image-t-end''.
296
297		''center-image-s''[[BR]]
298		Shorthand for setting ''center-image-s-begin'' and ''center-image-s-end''.
299
300		''center-image-t''[[BR]]
301		Shorthand for setting ''center-image-t-begin'' and ''center-image-t-end''.
302
303		''center-image''[[BR]]
304		A shorthand property for setting ''center-image-src'', ''center-image-repeat'', ''center-image-s-begin'', ''center-image-t-begin'', ''center-image-s-end'' and ''center-image-t-end''.
305
306		The decorator renders across the padded area of its element.
307
308		=== The 'tiled-vertical' decorator ===
309
310		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.
311
312		''top-image-src''
313		\|\| ''Value:'' \|\| <string> \|\|
314		\|\| ''Initial:'' \|\| not defined \|\|
315		\|\| ''Percentages:'' \|\| N/A \|\|
316
317		''top-image-s-begin'', ''top-image-t-begin''
318		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
319		\|\| ''Initial:'' \|\| 0 \|\|
320		\|\| ''Percentages:'' \|\| N/A \|\|
321
322		''top-image-s-end'', ''top-image-t-end''
323		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
324		\|\| ''Initial:'' \|\| 1 \|\|
325		\|\| ''Percentages:'' \|\| N/A \|\|
326
327		These properties specify the top image. They behave similarly to the properties in the 'image' decorator.
328
329		''bottom-image-src''
330		\|\| ''Value:'' \|\| <string> \|\|
331		\|\| ''Initial:'' \|\| not defined \|\|
332		\|\| ''Percentages:'' \|\| N/A \|\|
333
334		''bottom-image-s-begin'', ''bottom-image-t-begin''
335		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
336		\|\| ''Initial:'' \|\| 0 \|\|
337		\|\| ''Percentages:'' \|\| N/A \|\|
338
339		''bottom-image-s-end'', ''bottom-image-t-end''
340		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
341		\|\| ''Initial:'' \|\| 1 \|\|
342		\|\| ''Percentages:'' \|\| N/A \|\|
343
344		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.
345
346		''center-image-src''
347		\|\| ''Value:'' \|\| <string> \|\|
348		\|\| ''Initial:'' \|\| not defined \|\|
349		\|\| ''Percentages:'' \|\| N/A \|\|
350
351		''center-image-repeat''
352		\|\| ''Value:'' \|\| stretch \| clamp-stretch \| clamp-truncate \| repeat-stretch \| repeat-truncate \|\|
353		\|\| ''Initial:'' \|\| stretch \|\|
354		\|\| ''Percentages:'' \|\| N/A \|\|
355
356		''center-image-s-begin'', ''center-image-t-begin''
357		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
358		\|\| ''Initial:'' \|\| 0 \|\|
359		\|\| ''Percentages:'' \|\| N/A \|\|
360
361		''center-image-s-end'', ''center-image-t-end''
362		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
363		\|\| ''Initial:'' \|\| 1 \|\|
364		\|\| ''Percentages:'' \|\| N/A \|\|
365
366		These properties specify the centre image. They behave similarly to the centre properties in the 'horizontal-tiled' decorator.
367
368		''top-image-s''[[BR]]
369		Shorthand for setting ''top-image-s-begin'' and ''top-image-s-end''.
370
371		''top-image-t''[[BR]]
372		Shorthand for setting ''top-image-t-begin'' and ''top-image-t-end''.
373
374		''top-image''[[BR]]
375		A shorthand property for setting ''top-image-src'', ''top-image-s-begin'', ''top-image-t-begin'', ''top-image-s-end'' and ''top-image-t-end''.
376
377		''bottom-image-s''[[BR]]
378		Shorthand for setting ''bottom-image-s-begin'' and ''bottom-image-s-end''.
379
380		''bottom-image-t''[[BR]]
381		Shorthand for setting ''bottom-image-t-begin'' and ''bottom-image-t-end''.
382
383		''bottom-image''[[BR]]
384		A shorthand property for setting ''bottom-image-src'', ''bottom-image-s-begin'', ''bottom-image-t-begin'', ''bottom-image-s-end'' and ''bottom-image-t-end''.
385
386		''center-image-s''[[BR]]
387		Shorthand for setting ''center-image-s-begin'' and ''center-image-s-end''.
388
389		''center-image-t''[[BR]]
390		Shorthand for setting ''center-image-t-begin'' and ''center-image-t-end''.
391
392		''center-image''[[BR]]
393		A shorthand property for setting ''center-image-src'', ''center-image-repeat'', ''center-image-s-begin'', ''center-image-t-begin'', ''center-image-s-end'' and ''center-image-t-end''.
394
395		The decorator renders across the padded area of its element.
396
397		=== The 'tiled-box' decorator ===
398
399		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.
400
401		''top-left-image-src''
402		\|\| ''Value:'' \|\| <string> \|\|
403		\|\| ''Initial:'' \|\| not defined \|\|
404		\|\| ''Percentages:'' \|\| N/A \|\|
405
406		''top-left-image-s-begin'', ''top-left-image-t-begin''
407		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
408		\|\| ''Initial:'' \|\| 0 \|\|
409		\|\| ''Percentages:'' \|\| N/A \|\|
410
411		''top-left-image-s-end'', ''top-left-image-t-end''
412		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
413		\|\| ''Initial:'' \|\| 1 \|\|
414		\|\| ''Percentages:'' \|\| N/A \|\|
415
416		These properties specify the top-left corner image. They behave similarly to the properties in the 'image' decorator.
417
418		''top-right-image-src''
419		\|\| ''Value:'' \|\| <string> \|\|
420		\|\| ''Initial:'' \|\| not defined \|\|
421		\|\| ''Percentages:'' \|\| N/A \|\|
422
423		''top-right-image-s-begin'', ''top-right-image-t-begin''
424		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
425		\|\| ''Initial:'' \|\| 0 \|\|
426		\|\| ''Percentages:'' \|\| N/A \|\|
427
428		''top-right-image-s-end'', ''top-right-image-t-end''
429		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
430		\|\| ''Initial:'' \|\| 1 \|\|
431		\|\| ''Percentages:'' \|\| N/A \|\|
432
433		These properties specify the top-right corner image. They behave similarly to the properties in the 'image' decorator.
434
435		''bottom-left-image-src''
436		\|\| ''Value:'' \|\| <string> \|\|
437		\|\| ''Initial:'' \|\| not defined \|\|
438		\|\| ''Percentages:'' \|\| N/A \|\|
439
440		''bottom-left-image-s-begin'', ''bottom-left-image-t-begin''
441		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
442		\|\| ''Initial:'' \|\| 0 \|\|
443		\|\| ''Percentages:'' \|\| N/A \|\|
444
445		''bottom-left-image-s-end'', ''bottom-left-image-t-end''
446		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
447		\|\| ''Initial:'' \|\| 1 \|\|
448		\|\| ''Percentages:'' \|\| N/A \|\|
449
450		These properties specify the bottom-left corner image. They behave similarly to the properties in the 'image' decorator.
451
452		''bottom-right-image-src''
453		\|\| ''Value:'' \|\| <string> \|\|
454		\|\| ''Initial:'' \|\| not defined \|\|
455		\|\| ''Percentages:'' \|\| N/A \|\|
456
457		''bottom-right-image-s-begin'', ''bottom-right-image-t-begin''
458		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
459		\|\| ''Initial:'' \|\| 0 \|\|
460		\|\| ''Percentages:'' \|\| N/A \|\|
461
462		''bottom-right-image-s-end'', ''bottom-right-image-t-end''
463		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
464		\|\| ''Initial:'' \|\| 1 \|\|
465		\|\| ''Percentages:'' \|\| N/A \|\|
466
467		These properties specify the bottom-right corner image. They and behave similarly to the properties in the 'image' decorator.
468
469		''top-image-src''
470		\|\| ''Value:'' \|\| <string> \|\|
471		\|\| ''Initial:'' \|\| not defined \|\|
472		\|\| ''Percentages:'' \|\| N/A \|\|
473
474		''top-image-repeat''
475		\|\| ''Value:'' \|\| stretch \| clamp-stretch \| clamp-truncate \| repeat-stretch \| repeat-truncate \|\|
476		\|\| ''Initial:'' \|\| stretch \|\|
477		\|\| ''Percentages:'' \|\| N/A \|\|
478
479		''top-image-s-begin'', ''top-image-t-begin''
480		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
481		\|\| ''Initial:'' \|\| 0 \|\|
482		\|\| ''Percentages:'' \|\| N/A \|\|
483
484		''top-image-s-end'', ''top-image-t-end''
485		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
486		\|\| ''Initial:'' \|\| 1 \|\|
487		\|\| ''Percentages:'' \|\| N/A \|\|
488
489		These properties specify the top edge image. They behave similarly to the centre properties in the 'horizontal-tiled' decorator.
490
491		''right-image-src''
492		\|\| ''Value:'' \|\| <string> \|\|
493		\|\| ''Initial:'' \|\| not defined \|\|
494		\|\| ''Percentages:'' \|\| N/A \|\|
495
496		''right-image-repeat''
497		\|\| ''Value:'' \|\| stretch \| clamp-stretch \| clamp-truncate \| repeat-stretch \| repeat-truncate \|\|
498		\|\| ''Initial:'' \|\| stretch \|\|
499		\|\| ''Percentages:'' \|\| N/A \|\|
500
501		''right-image-s-begin'', ''right-image-t-begin''
502		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
503		\|\| ''Initial:'' \|\| 0 \|\|
504		\|\| ''Percentages:'' \|\| N/A \|\|
505
506		''right-image-s-end'', ''right-image-t-end''
507		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
508		\|\| ''Initial:'' \|\| 1 \|\|
509		\|\| ''Percentages:'' \|\| N/A \|\|
510
511		These properties specify the right edge image. They behave similarly to the centre properties in the 'vertical-tiled' decorator.
512
513		''bottom-image-src''
514		\|\| ''Value:'' \|\| <string> \|\|
515		\|\| ''Initial:'' \|\| not defined \|\|
516		\|\| ''Percentages:'' \|\| N/A \|\|
517
518		''bottom-image-repeat''
519		\|\| ''Value:'' \|\| stretch \| clamp-stretch \| clamp-truncate \| repeat-stretch \| repeat-truncate \|\|
520		\|\| ''Initial:'' \|\| stretch \|\|
521		\|\| ''Percentages:'' \|\| N/A \|\|
522
523		''bottom-image-s-begin'', ''bottom-image-t-begin''
524		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
525		\|\| ''Initial:'' \|\| 0 \|\|
526		\|\| ''Percentages:'' \|\| N/A \|\|
527
528		''bottom-image-s-end'', ''bottom-image-t-end''
529		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
530		\|\| ''Initial:'' \|\| 1 \|\|
531		\|\| ''Percentages:'' \|\| N/A \|\|
532
533		These properties specify the bottom edge image. They behave similarly to the centre properties in the 'horizontal-tiled' decorator.
534
535		''left-image-src''
536		\|\| ''Value:'' \|\| <string> \|\|
537		\|\| ''Initial:'' \|\| not defined \|\|
538		\|\| ''Percentages:'' \|\| N/A \|\|
539
540		''left-image-repeat''
541		\|\| ''Value:'' \|\| stretch \| clamp-stretch \| clamp-truncate \| repeat-stretch \| repeat-truncate \|\|
542		\|\| ''Initial:'' \|\| stretch \|\|
543		\|\| ''Percentages:'' \|\| N/A \|\|
544
545		''left-image-s-begin'', ''left-image-t-begin''
546		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
547		\|\| ''Initial:'' \|\| 0 \|\|
548		\|\| ''Percentages:'' \|\| N/A \|\|
549
550		''left-image-s-end'', ''left-image-t-end''
551		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
552		\|\| ''Initial:'' \|\| 1 \|\|
553		\|\| ''Percentages:'' \|\| N/A \|\|
554
555		These properties specify the left edge image. They behave similarly to the centre properties in the 'vertical-tiled' decorator.
556
557		''center-image-src''
558		\|\| ''Value:'' \|\| <string> \|\|
559		\|\| ''Initial:'' \|\| not defined \|\|
560		\|\| ''Percentages:'' \|\| N/A \|\|
561
562		''center-image-repeat''
563		\|\| ''Value:'' \|\| stretch \| clamp-stretch \| clamp-truncate \| repeat-stretch \| repeat-truncate \|\|
564		\|\| ''Initial:'' \|\| stretch \|\|
565		\|\| ''Percentages:'' \|\| N/A \|\|
566
567		''center-image-s-begin'', ''center-image-t-begin''
568		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
569		\|\| ''Initial:'' \|\| 0 \|\|
570		\|\| ''Percentages:'' \|\| N/A \|\|
571
572		''center-image-s-end'', ''center-image-t-end''
573		\|\| ''Value:'' \|\| <number> \| <length> \| <percentage> \|\|
574		\|\| ''Initial:'' \|\| 1 \|\|
575		\|\| ''Percentages:'' \|\| N/A \|\|
576
577		These properties specify the center image. They behave similarly to the centre properties in the 'tiled-horizontal' decorator.
578
579		''top-left-image-s''[[BR]]
580		Shorthand for setting ''top-left-image-s-begin'' and ''top-left-image-s-end''.
581
582		''top-left-image-t''[[BR]]
583		Shorthand for setting ''top-left-image-t-begin'' and ''top-left-image-t-end''.
584
585		''top-left-image''[[BR]]
586		A shorthand property for setting ''top-left-image-src'', ''top-left-image-s-begin'', ''top-left-image-t-begin'', ''top-left-image-s-end'' and ''top-left-image-t-end''.
587
588		''top-right-image-s''[[BR]]
589		Shorthand for setting ''top-right-image-s-begin'' and ''top-right-image-s-end''.
590
591		''top-right-image-t''[[BR]]
592		Shorthand for setting ''top-right-image-t-begin'' and ''top-right-image-t-end''.
593
594		''top-right-image''[[BR]]
595		A shorthand property for setting ''top-right-image-src'', ''top-right-image-s-begin'', ''top-right-image-t-begin'', ''top-right-image-s-end'' and ''top-right-image-t-end''.
596
597		''bottom-left-image-s''[[BR]]
598		Shorthand for setting ''bottom-left-image-s-begin'' and ''bottom-left-image-s-end''.
599
600		''bottom-left-image-t''[[BR]]
601		Shorthand for setting ''bottom-left-image-t-begin'' and ''bottom-left-image-t-end''.
602
603		''bottom-left-image''[[BR]]
604		A shorthand property for setting ''bottom-left-image-src'', ''bottom-left-image-s-begin'', ''bottom-left-image-t-begin'', ''bottom-left-image-s-end'' and ''bottom-left-image-t-end''.
605
606		''bottom-right-image-s''[[BR]]
607		Shorthand for setting ''bottom-right-image-s-begin'' and ''bottom-right-image-s-end''.
608
609		''bottom-right-image-t''[[BR]]
610		Shorthand for setting ''bottom-right-image-t-begin'' and ''bottom-right-image-t-end''.
611
612		''bottom-right-image''[[BR]]
613		A shorthand property for setting ''bottom-right-image-src'', ''bottom-right-image-s-begin'', ''bottom-right-image-t-begin'', ''bottom-right-image-s-end'' and ''bottom-right-image-t-end''.
614
615		''top-image-s''[[BR]]
616		Shorthand for setting ''top-image-s-begin'' and ''top-image-s-end''.
617
618		''top-image-t''[[BR]]
619		Shorthand for setting ''top-image-t-begin'' and ''top-image-t-end''.
620
621		''top-image''[[BR]]
622		A shorthand property for setting ''top-image-src'', ''top-image-repeat'', ''top-image-s-begin'', ''top-image-t-begin'', ''top-image-s-end'' and ''top-image-t-end''.
623
624		''right-image-s''[[BR]]
625		Shorthand for setting ''right-image-s-begin'' and ''right-image-s-end''.
626
627		''right-image-t''[[BR]]
628		Shorthand for setting ''right-image-t-begin'' and ''right-image-t-end''.
629
630		''right-image''[[BR]]
631		A shorthand property for setting ''right-image-src'', ''right-image-repeat'', ''right-image-s-begin'', ''right-image-t-begin'', ''right-image-s-end'' and ''right-image-t-end''.
632
633		''bottom-image-s''[[BR]]
634		Shorthand for setting ''bottom-image-s-begin'' and ''bottom-image-s-end''.
635
636		''bottom-image-t''[[BR]]
637		Shorthand for setting ''bottom-image-t-begin'' and ''bottom-image-t-end''.
638
639		''bottom-image''[[BR]]
640		A shorthand property for setting ''bottom-image-src'', ''bottom-image-repeat'', ''bottom-image-s-begin'', ''bottom-image-t-begin'', ''bottom-image-s-end'' and ''bottom-image-t-end''.
641
642		''left-image-s''[[BR]]
643		Shorthand for setting ''left-image-s-begin'' and ''left-image-s-end''.
644
645		''left-image-t''[[BR]]
646		Shorthand for setting ''left-image-t-begin'' and ''left-image-t-end''.
647
648		''left-image''[[BR]]
649		A shorthand property for setting ''left-image-src'', ''left-image-repeat'', ''left-image-s-begin'', ''left-image-t-begin'', ''left-image-s-end'' and ''left-image-t-end''.
650
651		''center-image-s''[[BR]]
652		Shorthand for setting ''center-image-s-begin'' and ''center-image-s-end''.
653
654		''center-image-t''[[BR]]
655		Shorthand for setting ''center-image-t-begin'' and ''center-image-t-end''.
656
657		''center-image''[[BR]]
658		A shorthand property for setting ''center-image-src'', ''center-image-repeat'', ''center-image-s-begin'', ''center-image-t-begin'', ''center-image-s-end'' and ''center-image-t-end''.
659
660		The decorator renders across the padded area of its element.
	155	1. For displaying a single stretched image, the [[wiki:documentation/RCSS/Decorators/Image image]] decorator.
	156	1. For tiling images horizontally, the [[wiki:documentation/RCSS/Decorators/TiledHorizontal tiled-horizontal]] decorator.
	157	1. For tiling images vertically, the [[wiki:documentation/RCSS/Decorators/TiledVertical tiled-vertical]] decorator.
	158	1. For tiling images across a box, the [[wiki:documentation/RCSS/Decorators/TiledBox tiled-box]] decorator.