+2
Completed

Tile Background Image

Michael Mikkelsen 8 years ago updated by icahill (Administrator) 8 years ago 1
I created this code to tile the backgroud I found here:
http://subtlepatterns.com/simple-hori...

note: It only tiles horizontally and takes a few seconds to tile down the page.


<classes>
<class name="bgimage">
<image name="[param:name]" width="100%" height="4" source="images/shl.png" />
</class>
</classes>

<main>
<!-- background -->
<pager name="background" alias="BACKGROUND" ypos="0%" width="100%" lwidth="100%" height="100%" orientation="vertical" paginate="no" >
</pager>
</main>

<actions>
<action name="startup" oninit="yes">
<assign property="var:yback" value="120" />
<play action="addtobackground" />
</action>

<action name="addtobackground">
<if lhs="[var:yback]" operator="gt" rhs="0">
<create name="image[var:yback]" class="bgimage" target="BACKGROUND" />
<!--<alert message="imgH [object:BACKGROUND/image[var:yback].height] imgW [object:BACKGROUND/image[var:yback].width] h [object:BACKGROUND.height] w [object:BACKGROUND.width]"/> --> <!-- & [object:image[var:yback].heigth] -->
<assign property="var:yback" value="[eval:[var:yback]-1]" />
<play action="addtobackground" />
</if>
</action>
</actions>
This is a pretty sweet method of using variables and a tiny image to create a cool effect.

Well done sir.