How to use Sprites in Webflow

Would someone who has successfully implemented an image sprite into their webflow project kindly put together a tutorial for the good of the group?

I haven’t tried but the only way I see this in Webflow is to make a div the size of your output image, set its size in pixels, then add your sprite image as a background and shift it as desired. Either that or another nested div inside the size of the sprite image, and you shift the div. For the second solution the outer div has to be set to overflow:hidden.

The main difference is the backround solution will have the image part of the style of the div, and will need an extra class to shift the bg. Which can be a handy solution it you handle more than one spritesheet.

I finally got around to working this out. This post shows how to successfully implement sprite images into your Webflow project. Hope it helps.

1 Like