Crestron Components Lib - Showcase App

ch5-background: repeat

repeat attribute

The repeat property sets how a background image will be repeated. In the absence of repeat attribute 'no-repeat' will be considered as default. Supported values no-repeat, repeat-x, repeat-y and repeat. The value repeat-x repeats an image horizontally, repeat-y repeats an image vertically, and repeat repeats an image both horizontally and vertically. The last image will be clipped if it does not fit.
The default background color will be black which can be overridden by the 'imgbackgroundcolor' attribute.

<div style="height: 320px;">
    <ch5-background imgbackgroundcolor="gray" repeat="no-repeat" url="./img/jupiter.svg"></ch5-background>
</div>

Background repeat repeat-x position. It will repeat in horizontal direction.

<div style="height: 320px;">
    <ch5-background repeat="repeat-x" url="./img/jupiter.svg"></ch5-background>
</div>

Background repeat repeat-y position. It will repeat in vertical direction.

<div style="height: 320px;">
    <ch5-background repeat="repeat-y" url="./img/jupiter.svg"></ch5-background>
</div>

Background repeat repeat position. It will repeat in both direction.

<div style="height: 320px;">
    <ch5-background refreshrate="10" repeat="repeat" url="./img/jupiter.svg | ./img/gravel.png"></ch5-background>
</div>