How to 'Call' Assets Folder image onto a Page

Solved
Highlighted
Excursionist
15 0 1

Hi Everyone, 

 

I'm trying to find out code to display an image from the assets folder (as well as the files folder) as the background of a custom #div on one of my shopify pages. To make this as simple as possible I've provided the below; 

 

#div_container{background-size: cover; height: 100%; width: 100%;} - sets up size of div container

 

#div_container{background:url({{ 'Image-Name' | asset_img_url: '300x' }});}
#div_container{background:url({{ 'Image-Name' | img_url: '720x720' }});}
#div_container{background:url({{ 'Image-Name' | asset_url }});}

#div_container{background:url({{ 'Image-Name' | file_img_url: '1074x767' }});}

 

I'm also reviewig the manual https://help.shopify.com/en/themes/liquid/filters/url-filters#file_img_url and am watching as many shopify liquid tutorials as I can, but can anyone point me in the right direction?

0 Likes
Highlighted
Shopify Partner
1838 174 657

Using Liquid's asset_img_url filter.

 

Best wishes!

I turn coffee in to code - since 1998
1 Like
Highlighted
Excursionist
15 0 1

Thanks KarlOfferberger!

Do I need to change any part of the format as it's currently not working? 

:)

 

0 Likes
Highlighted
Shopify Partner
1838 174 657

Argh! My bad, didn't see you already tried most combinations (reminder to self: must read more carefully).

 

Well asset_url without any further arguments should work as is. What are you seeing on the output CSS?

I turn coffee in to code - since 1998
0 Likes
Highlighted
Excursionist
15 0 1

Haha all good - I do that all the time. 

I've screenshotted the css output and have made the page accessible (just on case that helps). 

https://happy-pugs.com/pages/about-us 

0 Likes
Highlighted

Success.

Shopify Partner
1838 174 657

You must give the aboutUs_image1 div element a min-height - without any content it's just empty and if it's empty it's height is 0 and thus... well you get my point ;-)

I turn coffee in to code - since 1998
1 Like
Highlighted
Excursionist
15 0 1

https://happy-pugs.com/pages/about-us 

 

Sorry I got the url wrong above. This one is correct.

0 Likes
Highlighted
Shopify Partner
1838 174 657

No worries, figured that out. See solution above.

I turn coffee in to code - since 1998
0 Likes
Highlighted
Excursionist
15 0 1

Thankyou!

This has been cursing me for 3 days!

If there is anything I can do besides giving you my highest recommendation please let me know :) 

1 Like
Highlighted
Tourist
3 0 0

how can i use url filter to get the css of my image 

0 Likes