- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
Display a featured image as a background image
SOLVEFeb 14, 2017 7:44 PM
Am trying to get a featured image to show as a background image, and need to figure out the HubL to call a featured image from inside some HTML.
Thanks to @Jsum for part of the answer here.
This is what I have so far, but not sure how to write 'background: url ' so it calls the image.
{% for feature_item in featured_topic %} {% image_src "image_src" %} <div class="featured-post"> <div class="span6"> {% if feature_item.post_list_summary_featured_image %} <span style='background: url ( {% image_src "{{ feature_item.post_list_summary_featured_image }}" %} ) center center no-repeat; background-size: cover;' class="hs-featured-image featured-post-image-1"> </span> {% endif %} </div>
Solved! Go to Solution.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content
Accepted Solutions
Feb 14, 2017 10:06 PM
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 %}
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Email to a Friend
- Report Inappropriate Content