How do I 'reference' an image from the asset folder in the style sheet for an image background?

[Michael1789]

Hi Guys,

I'm trying to create a div section which calls an image from the shopify folder. The code to do this in traditional CSS is below (which I've been adding to the bottom of the theme.scss.liquid); 

#selector_name{background-image: url("file_directory/folder_name/image_name");}

#selector_name{background-size: cover; height: 100%; width: 100%;}

This doesn't seem to work however, from my experience and from reading other forums, the correct styling seems to be the below - which sadly I cannot make work; 

#selector_name {background:url({{ 'Image_name' | asset_url }});}

If anyone could please help or let me know what the correct code format would be, I would be very greatful. 

Thanks in advance 🙂

[Jason]

Is it a .liquid css file that you added the code into or just a standard .css file? Would be good to see the exact code you tried, and even a link to the stylesheet.

[Michael1789]

Hi Jason!

Sure! Sorry this is my first ever post.

The file is the standard theme.scss.liquid that comes with the Debut theme.

The code I've added is all at the bottom of the file lines 6618 to 6627. 

https://happypug-com.myshopify.com/admin/themes/57866879040?key=assets/theme.scss.liquid 

I've added the code below in case the link doesn't work. 

   #aboutUs_image_1{background:url({{ 'Image1-767-511.png' | asset_url }});}
  
   #aboutUs_image_2{background-image: url("/1/0158/6996/8448/files/Image2-767-511.png?14681087191797571539");}
   #aboutUs_image_3{background-image: url("/files/image3-767-511.png?14681087191797571539");}
  
   #aboutUs_image_1,
   #aboutUs_image_2,
   #aboutUs_image_3{background-size: cover; height: 100%; width: 100%;}

[Jason]

That link is for the file in your admin - something the forum members don't have access to. Not to worry, that gave me enough to pull the public url.
https://cdn.shopify.com/s/files/1/0158/6996/8448/t/7/assets/theme.scss.css?1361495380444474816

If I search that file for "#aboutUs_image_1" I can see that the asset is being included correctly. However, that file doesn't seem to exist. Are you 100% sure that assets exists in that theme?

[Michael1789]

Sorry Jason,

I must be even less aware of how Shopify works than i realized. 

There is no file named '#aboutUs_image_1' - that is just the name of the #div I'm using to contain the image.

The image is named 'Image2-767-511.png' - which I've added 2 screenshots of below showing the image in my shopify store and in the source code. 

So no, I son't believe the asset exists as i have not created such an asset. 

[Jason]

Now we're getting somewhere! When you upload something into the asset folder of the theme you can happily use the asset_url filter. However in this case you've upload the file into settings/files instead. That's the key.

Use file_url instead.

[Michael1789]

We are getting somewhere!

I will work on this shortly and will update you.

Thank you for all your time, expertise and patience! 

[Michael1789]

Hi Jason,

Thank you so much for the help earlier. 

I have added uploaded the image to the asset folder and used the asset_url  and the asset_img_url  filters (in the screenshot). But neither seem to work.

Is there anything else I'm missing or a resource I might look to? 

🙂 

[yackov]

How would I reference a image that's in "/uploads/" on shopify servers so I can image_url filters for the resolution, or is it not possible.

For example I'm using a personalizer app which saves the personalized image in the line_item properties. I would like to display this image in the confirmation email to the customer, but I don't want them to be able to download a high quality image so I want to resize it with the url filters. below is the code.

{% assign property_size = line.properties | size %}
{% if property_size > 0 %}
  {% for p in line.properties %}
      {% if p.first contains '_Preview' %}
<img src="{{ p.last }}" align="left" width="60" height="60" class="order-list__product-image"/>
      {% endif %}
  {% endfor %}
{% else %}
          {% if line.image %}
            <img src="{{ line | img_url: 'compact_cropped' }}" align="left" width="60" height="60" class="order-list__product-image"/>
          {% endif %}
{% endif %}

[JayneFGulbin]

In case someone needs this 🙂
You can call it like this (directly) in CSS if files are uploaded on Assets.

.class-name {background: url('image.jpg');}

Hope this helps 🙂

[HashtagDesign]

This is the correct answer.

CSS file is inside the assets folder which is where you should upload your asset to also.

Therefore, the file path becomes simplified to just the asset file name (i.e. no directory required).

[BaoJay]

Yes, this solution works for me.

I apply these code to my custom theme:

main-cart.liquid

<div class="empty-cart-image"></div>

cart.css

.empty-cart-image {
  background: center / contain no-repeat url('empty-cart-image.jpg');
  height: 300px;
}

And this is the final result

Hope this helps!