Solved

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

dwightco
Excursionist
21 0 2

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:

dwightco_0-1610803748225.png

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

Any help would be appreciated! Thank you! 

Accepted Solution (1)

tim
Shopify Expert
3212 223 1171

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;'>

 

 

View solution in original post

Replies 2 (2)

tim
Shopify Expert
3212 223 1171

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;'>

 

 

dwightco
Excursionist
21 0 2

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