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

Technical Q&A
1

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 but not when it’s a background.

Here’s the code:

{% assign collection = collections[section.settings.collection] %}
{% assign background_image = collection.image %}
  

    ## Testing Text

In that case, when I inspect the div .dynamic-collection-title-card, I get this:

dwightco_0-1610803748225.png

It detects the URL but there are spaces inside?? Super weird!

Any help would be appreciated! Thank you!

2

You have nested commas in style clause and not in img, so browser treats them like:

Do like this:

{% assign collection = collections[section.settings.collection] %}
{% assign background_image = collection.image | im_url: "800x" %}
1 Like
3

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