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

Solved
dwightco
Tourist
6 0 0

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! 

0 Likes
tim
Shopify Expert
2846 115 935

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

 

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
dwightco
Tourist
6 0 0

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

0 Likes