Lazy load style="background-image inside a span tag

I've implemented lazy load images to most of my website (USING THIS https://github.com/tuupola/lazyload), however I have a shop page which is a load of thumbnails which are using the background-image tag, the code I have is as follows (it's running on smarty template system) :-

{section name=c loop=$cats->mCats}
<div class="block"><a class="clearfix" href="{$smarty.const.SITE_ROOT}/{$cats->mCats[c].menulinktext}/"><span class="thumb" style="background-image: url({$smarty.const.SITE_ROOT}{$smarty.const.IMG_DIR}/thumbnails/{$cats->mCats[c].img_category});"></span><span class="info">{$cats->mCats[c].name|escape:'htmlall'|widont}</span></a></div>{/section}

The CSS :-

.blocks1 .block a span.thumb {
width: 120px;
height: 90px;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
margin: 0 auto

}

All the examples I can find rely on the background-image part being inside a div but mine is inside a span tag.

Is there a way to get this to work?

Reading online suggest span is used to style text but the original dev who wrote this seems to be using it for images?

Thanks for any help on this, I think I've tried just about everything to get this to work!!

Solution

I got this working using a different plugin (http://jquery.eisbehr.de/lazy/#about)

I added this to the CSS :-

div.lazy {
    width: 120px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
    display: block;

}

Changed the tpl code to : -

{section name=c loop=$cats->mCats}
<div class="block"><a class="clearfix" href="{$smarty.const.SITE_ROOT}/{$cats->mCats[c].menulinktext}/"><div class="lazy" data-src="{$smarty.const.SITE_ROOT}{$smarty.const.IMG_DIR}/thumbnails/{$cats->mCats[c].img_category}" /></div><span class="info">{$cats->mCats[c].name|escape:'htmlall'|widont}</span></a></div>{/section}

And I now have fully lazy loading images :)