Repeating VML shape vertically

Question

I've managed to use VML to display a background image for a td, but I want it to repeat vertically. Any exmaples I find are only for one image. Can anyone think of show I could achieve this? I have put my example page in the fiddle below.

http://jsfiddle.net/TSeBy/

Answer 1

I can't think of any other solution than using javascript. It will be easier to use a vector library (ex Raphaël http://raphaeljs.com) but the page will be heavier.

You will have to take the current size of the container and manually compute y offsets.

It is very difficult to clone a VML element on IE so you will have to create several elements with same properties (Raphael have a clone() methods but it actually create a new identical element).

Answer 2

Try making the image file the width of the td, but not as tall as the TD. Then use the v:fill type="tile" setting. It will repeat vertically automatically. Setting the width of the image to the width of the td causes the image to display only once across the screen. for each repeat.