Liquid, JavaScript, themes, sales channels
Hi all!
I'm struggling to make {{ collection.image }} appear as a background image. It's very weird because the image fine appears when it's in <img> but not when it's a background.
Here's the code:
{% assign collection = collections[section.settings.collection] %}
{% assign background_image = collection.image %}
<div class = "dynamic-collection-title-card" style = "background: url("{{ background_image | img_url:'800x' }}") no-repeat center;">
<h2>Testing Text</h2>
<img src="{{ background_image | img_url: '800x' }}">
</div>
In that case, when I inspect the div .dynamic-collection-title-card, I get this:
It detects the URL but there are spaces inside?? Super weird!
Any help would be appreciated! Thank you!
Solved! Go to the solution
This is an accepted solution.
You have nested commas in style clause and not in img, so browser treats them like:
<div class = "dynamic-collection-title-card" style = "background: url("{{ background_image | img_url:'800x' }}") no-repeat center;">
Do like this:
{% assign collection = collections[section.settings.collection] %}
{% assign background_image = collection.image | im_url: "800x" %}
<div class = "dynamic-collection-title-card" style = 'background: url("{{ background_image }}") no-repeat center;'>
This is an accepted solution.
You have nested commas in style clause and not in img, so browser treats them like:
<div class = "dynamic-collection-title-card" style = "background: url("{{ background_image | img_url:'800x' }}") no-repeat center;">
Do like this:
{% assign collection = collections[section.settings.collection] %}
{% assign background_image = collection.image | im_url: "800x" %}
<div class = "dynamic-collection-title-card" style = 'background: url("{{ background_image }}") no-repeat center;'>
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024