Using Sprites in Webflow

Community resources Webflow Tips
1

Have you wondered how to use sprite images in Webflow? Well I have successfully done it and thought it would be useful to post a quick tutorial so others could do it as well.
Steps

  1. Create a DIV and set the height and width for the size of the image that will show
  2. Set sprite as background image of the DIV
  3. Set width on background image to AUTO and height to the actual pixel height of sprite image
  4. Set position of sprite image based on your sprite’s CSS
  5. Set Tile and Fixed to NO
    Here is a page that shows what happens and the sprite image that I used. Each picture is 300 x 300 pixels.
    https://webflow.com/design/sharks11u-milanovich1260347?preview=76fa48d8d58183ee9e67c2f95e868f9a
    1800×1500 1.1 MB
2

you can also use this technique for only the photos. When you want to make an overlay, you can do so with the webflow interactions.