You are using a span tag which is an inline element (like text). It can't be styled like block elements. Do you have "display: block;" assigned to the span tag in your css? if not you can try that or use a div element instead of a span tag which is probably better syntax.
Also, regardless of element used, a height and a width need to be set other wise nothing is keeping it from being 0x0.
hopefully ones of these helps. Also quotations within the url value of the background attribute are not required. Using them shouldn't have anything to do with your issue, and your code doesn't appear to have any errors. The below just has the quotation marks adjusted.
{% if feature_item.post_list_summary_featured_image %}
<span style="background: url({{ feature_item.post_list_summary_featured_image }}) center center no-repeat; background-size: cover;"class="hs-featured-image featured-post-image-1">
</span>
{% endif %}
I want to use the featured image of my latest posts for as the background for a hero banner for my blog. I put a hubl module over the listing template.
HubL Module
And, I'm trying to use the following code within that module to display the featured image from the lastest post.
{% for post in posts %}
{% if loop.index = 1 %}
<div class=blog-hero style="background:url('{{ content.featured_image }}') top center no-repeat; background-size: cover;"></div>
{% endif %}
{% endfor %}
You are using a span tag which is an inline element (like text). It can't be styled like block elements. Do you have "display: block;" assigned to the span tag in your css? if not you can try that or use a div element instead of a span tag which is probably better syntax.
Also, regardless of element used, a height and a width need to be set other wise nothing is keeping it from being 0x0.
hopefully ones of these helps. Also quotations within the url value of the background attribute are not required. Using them shouldn't have anything to do with your issue, and your code doesn't appear to have any errors. The below just has the quotation marks adjusted.
{% if feature_item.post_list_summary_featured_image %}
<span style="background: url({{ feature_item.post_list_summary_featured_image }}) center center no-repeat; background-size: cover;"class="hs-featured-image featured-post-image-1">
</span>
{% endif %}
I did realize that the image wasn't displaying because there was no content inside <span></span> When I added "display: block" as well as a min-height and "width: 100%" everything worked fine.
What's built now is a nice card layout with an image on the left that adjusts based on the viewport width (vs. just reducing both width and height). It can be seen here: http://cloudburst.astadia.com/blog