endlessly moving gapless banner

[rjwse@aol.com]

<style>*{margin:0;padding:0;}@keyframes ani{0%{background-position: 0 0;}100%{background-position: 100vw 0;}} div{background:url("1.jpeg") repeat-x 0 / 100% auto /*set at 50 & 25 to see result*/; height:calc(125/150*100vw); /*h/w as %*/ animation: ani 20s linear infinite;} </style>

<div></div>

<p>note: the actual bannered and seamless and gapless image appears between the empty div pairs (which is sort of strange). </p><br/>
<p>Get HxW of img by clicking any img in book. </p><br/>
<p>This syntax of url("") will not autocomplete and you have to type in filename of img.</p>

You can copy and paste the above into the calibre editor's snippet management list. When you type bannerimg2 followed by ctrl-j the above code expands in the editor. As soon as it lands, the moving banner will appear. You must select an image in your book and type its name into the placeholder $1. The style command only will work in the single xhtml segment being viewed UNLESS you put it into the stylesheet. Enclosed are 2 pictures, one showing the snippet, the other showing the banner mid-change. Best regards, Pop