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

Question

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!!

Answer 1

did you try to do it with a <Div> ?

W3School suggests "The <span> tag is an inline container used to mark up a part of a text, or a part of a document." And for Div: "The <div> tag defines a division or a section in an HTML document." I think it shouldn't make a big difference, as long as it doesn't bother your others styles?

Answer 2

The <span> tag is per definition an inline element used to format text. You can however turn it into a block element, so it will behave exactly like a div.

try adding this to your CSS rule:

.blocks1 .block a span.thumb {
    display: block;
}

The concept is explained here: https://www.w3schools.com/html/html_blocks.asp

If your items need to be displayed next to each other and you don't want them to wrap after each item, try display: inline-block; instead.

Answer 3

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:)