adding dynamically a property to a class in HTML

I've got these css classes:

planning a span.icon {
    background-image:url(../img/icon1.png);
    background-position:left top;
    background-repeat:no-repeat;

.planning a:hover span.icon {
    background-position: left bottom;
}

In my template, I want to loop on an item (blurb) and dynamically update the value for the property background-image.

For now, I've tried to remove background-image from css class and added it in the template without success:

{% for blurb in page.homepage.blurbs.all %}
    <div class="span4">
    <a href={{ blurb.link }}>
    <span class="img_icon icon" style="background-image: {% static blurb.icon %}"></span>
       </a>
     </div>
{% endfor %}

It ends up that the background-image property isn't attributed to the class icon.

Any idea to do the trick?