trying to understand how data-bgset works

jassoul
New Member
5 0 0

Hello everyone,

 

I'm trying to edit this line of code to make the size of my banner more responsive to the size of the page.

                 data-bgset="{{ collection.image | img_url: '600x' }} 600w, {{ collection.image | img_url: '800x' }} 800w, {{ collection.image | img_url: '1200x' }} 1200w, {{ collection.image | img_url: '1400x' }} 1400w, {{ collection.image | img_url: '1600x' }} 1600w">

 

 

I did some research and I cant figure out what the "600w" part does. 

Also, I played around with the numbers but I don't really notice changes.  

 

Ideally, I'd like it to look good from desktop to mobile but I'm not sure if I'm approaching the problem the right way.

 

Thank you very much in advance,

 

Reply 1 (1)

tim
Shopify Expert
3258 232 1178

data-bgset is a set of rules which instruct browser what image file to use as background depending on the actual width of this element on the screen, so each line like

{{ collection.image | img_url: '600x' }} 600w

means "use this file (which is actually resized to 600 pixels wide by Shopify image engine) when element width on screen will be 600 pixels (w is used do denote width in pixels).

This data-bgset attribute  works with lazysizes library  https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/bgset and follows the same notation for background as srcset attribute for images -- https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images