background css within theme.scss.liquid

[mjoyce]

Problem

I'm trying to use the background-image css property within theme.scss.liquid, i.e:

background-image: url({{ '../images/sprites/social-icons-sprite.png' | asset_url }});

The resultant asset url:

//cdn.shopify.com/s/files/1/0017/3968/5949/t/3/assets/../images/sprites/social-icons-sprite.png?8360082786597144940

This does not render for me.

Yet when place that same liquid code in sections/footer.liquid, i.e:

<a style="background-image: url({{ '../assets/images/social-icons-sprite.png' | asset_url }})" .../>

The resultant asset url of http://localhost/social-icons-sprite.png renders properly.

For lack of better phrasing, what am I missing here?

[huguestennier]

I can reproduce, so i'm gonna label it as bug.

Meanwhile, you can always put your images in the static folder (under assets). Since everything is under the same folder in dist, you don't have to specify the path when using | asset_url :

{{ 'social-icons-sprite.png' | asset_url }} will work fine.

[t-kelly]

Assets have been simplified in #850 and the change is now available in v1.0.0-beta.12

Docs that have also been updated:

• https://github.com/Shopify/slate/wiki/Slate-themes
• https://github.com/Shopify/slate/wiki/Template-and-layout-bundles
• https://github.com/Shopify/slate/wiki/Local-development

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.