Why is <img> working for dynamic images and not background?

[dwightco]

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! 

[tim · 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;'>

[dwightco]

@tim Thank you so much!!! Dumb mistake on my end lol