Shopify background-image with css (doesn't show)

0
votes

My problem is that when trying to insert some kind of a background image in Shopify, it never shows anything.

I have a navigation bar that has a pattern which the client wants and when I try to enable it, again nothing happens.

The code I'm using on that css background line (from googling around) is

background:url( "{{'navBggreen.jpg' | asset_url }}")

I've also tried

background:url( {{'navBggreen.jpg' | asset_url }} )

and nothing. Tutorials or any kind of documentation is extremely scarce for Shopify so...

Anyway, does anyone know how to get this working?

3
shopify

3 Answers

5
votes

Make sure your css file has .liquid extension so that it can process liquid code as asset_url is part of liquid. so make sure, your css file name is something like style.css.liquid.

2
votes

You call it like this from your CSS file in Assets:

.nav{background: url("navBggreen.jpg");}
1
votes

if you want to include images in your layout you will have to use the asset_url filter. However, if your images are called via a CSS stylesheet then you do not need to use asset_url - except if they are used in a theme settings form. Take out the asset_url and it should work ok.