Why does asset_img_url produce an invalid URL in my stylesheet?

Technical Q&A
1

I have an image Wave_Bottom.png in my Assets.

{{ ‘Wave_Bottom.png’ | asset_img_url: ‘122x35’ }} in the body of a section produces the correct the URL. However:

background-image: url(“{{ ‘Wave_Bottom.png’ | asset_img_url: ‘122x35’ }}”);

in the Stylesheet of the section produces:

https://cdn.shopify.com/s/files/1/0602/0952/9051/t/2/compiled_assets/%7B%7B%20’Wave_Bottom.png’%20%7C%20asset_url%20%7D%7D

which does not exist.

Any idea?

2

Hi @Basharc ,

You can change the code:
background-image: url(“{{ ‘Wave_Bottom.png’ | asset_img_url: ‘122x35’ }}”);
=>
background-image: url(Wave_Bottom.png);

Or please send your site and if your site is password protected, please send me the password.

I will check it for you.

3

url(Wave_Bottom.png) also produce an invalid URL

4

Solved.

Turns out we can’t have liquid inside {% stylesheet %}. So the solution is to have a in the body of the section and complete ignore {% stylesheet %}.

https://community.shopify.com/c/shopify-design/can-t-use-variable-in-between-stylesheet-tags-in-template/td-p/416501

I fail to see the point of {% stylesheet %}. I know it gets injected dynamically, but as soon as liquid is required (such as a background image), I need to move from {% stylesheet %} to . Why would anyone ever use {% stylesheet %} ?