Loading background images via CSS (well, actually via 'style.scss.liquid')

Highlighted
Shopify Partner
9 0 0

I have tried following the technique outlined here:

http://ecommerce.shopify.com/c/ecommerce-design/t/images-url-s-in-the-style-css-file-109049

e.g.

#selector {
  background:url({{ 'image.jpg' | asset_url }});
}

And it does not work. I've triple checked my file name and it is correct and it is definitely in the assets folder.

Can anyone please clarify how to load image assets as CSS background images successfully?

Is it possible that the scss > css compile is screwing something up?

Thanks.

0 Likes
Shopify Expert
9675 41 1361

Looks fine to me. It's likely that another style is overriding it (but without context that's hard to say for sure).
You can always try background-image instead, or just post a link so we can see it in action.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
Shopify Partner
9 0 0

You're right Jason. It's working now. I have absolutely no idea what I changed! It's all a blur...

It may have been related to the grid that was containing the image. I will play around with it more tonight to get to the bottom of it.

Thanks.

0 Likes
Shopify Partner
4 0 0

Hi Sam,

Would you share how you finally managed to get this working?
I'm having the same issue.

background-image:url('{{ 'arrow-left-light.png' | asset_url }}');

the image is in the asset folder already so I don't get it.
The result is 404 - it keeps adding random number at the end of the png file i.e .../arrow-left-light.png?622 
Why is this and how not to have this random number? Is it why it's 404?

Could anyone help please 
Thanks in advance 
Ben

0 Likes
Shopify Partner
9 0 0

Hi Ben,

You don't need those extra apostrophes inside the brackets.

You did this:

background-image: url('{{ 'arrow-left-light.png' | asset_url }}');

But it should look like this: 

background-image: url({{ 'arrow-left-light.png' | asset_url }});

It also works fine simply as background:

background: url({{ 'arrow-left-light.png' | asset_url }});

Did that work for you?

Cheers.

 

0 Likes
Shopify Partner
4 0 0

Hi Sam,

Thanks for the quick reply.
Actually I did try both with and without extra apostrophes but it does the same thing and didn't work.

Not too sure what's happening I'll probably just change them to icon fonts.

How did it work for you? Does it add the random number at the end of the file name? (i.e ....arrow.png?692) ?

Thanks again
Ben

0 Likes
Shopify Partner
9 0 0

Where is the random number showing up exactly? I'm not sure what you mean.

How are you adding your assets? In the 'SETTINGS' > 'FILES' section or directly into the 'Assets' folder? 

0 Likes
Shopify Partner
4 0 0

Hi Sam,

So the image url is like this 
http://cdn.shopify.com/s/files/1/0604/1261/t/3/assets/arrow-right-light.png?684

I don't get either why it adds the random number but I don't think that's not the problem because I've tried to edit the url on chrome inspector and delete the extra '?684' at the end of the file name but it's not getting the image either.

I'm working with Shopify Theme editor for mac. So I just paste the images to the asset folder on my local machine then the theme editor upload it whenever I make changes on it. 
 

0 Likes
Shopify Partner
4 0 0

Hi again Sam,

I finally found solution by converting the png to base64. So no more asset url problem
Just in case anyone stuck with this.

Cheers
Ben

0 Likes