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 :)

0 Likes
Jason
Shopify Expert
10041 119 1877

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.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
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%;}
0 Likes
Jason
Shopify Expert
10041 119 1877

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?

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
0 Likes
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. 

0 Likes
Jason
Shopify Expert
10041 119 1877

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.

★ Winning Partner of the Build a Business competition. ★ 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! 

 

0 Likes
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? 

:) 

0 Likes
yackov
Excursionist
15 0 2

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 %}

 

0 Likes