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

Michael1789
Excursionist
15 0 2

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 🙂

Replies 11 (11)

Jason
Shopify Expert
11190 225 2282

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.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
Michael1789
Excursionist
15 0 2

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
Shopify Expert
11190 225 2282

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?

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
Michael1789
Excursionist
15 0 2

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
Shopify Expert
11190 225 2282

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.

★ I jump on these forums in my free time to help and share some insights. Not looking to be hired, and not looking for work. http://freakdesign.com.au ★
Michael1789
Excursionist
15 0 2

We are getting somewhere!

I will work on this shortly and will update you.

Thank you for all your time, expertise and patience! 

 

Michael1789
Excursionist
15 0 2

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
Excursionist
16 0 3

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
Shopify Partner
13 2 8

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 🙂

- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- Think we should work together? Do you need more help? I’d love to hear from you at jaynegrace.gulbin@gmail.com or buymeacoffee.com/JayneGrace
Shopify Developer & Expert | Web Designer | Creative Graphic
HashtagDesign
Shopify Partner
8 0 2

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
Shopify Partner
2 1 0

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

BaoJay_0-1697618368237.png

 

Hope this helps!

I'm a passionate Shopify Theme Developer, weaving seamless and stunning digital experiences for e-commerce ventures.