<h1 id="heading-css-image-sprites">CSS Image Sprites</h1>
An image sprite is a collection of images put into a single image
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1686050160573/ba8903c6-1778-4288-a43b-d0d1815d60d6.png" alt class="image--center mx-auto" />
Example:
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1686050208335/7e65e08e-ed53-4d93-8a6b-8f6c081c717e.png" alt class="image--center mx-auto" />
<hr />
<img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png" alt="image.png" />
Download our HTML &amp; CSS Visual Treat! ebook Here: <a target="_blank" href="https://codemarch.gumroad.com/l/hxazr">Click here</a>

# **CSS Image Sprites**

An image sprite is a collection of images put into a single image

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686050160573/ba8903c6-1778-4288-a43b-d0d1815d60d6.png align="center")

Example:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1686050208335/7e65e08e-ed53-4d93-8a6b-8f6c081c717e.png align="center")

---

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1666336375150/5HqI8zNVh.png align="left")

Download our HTML & CSS Visual Treat! ebook Here: [Click here](https://codemarch.gumroad.com/l/hxazr)

CSS Image Sprites

Table of contents

CSS Image Sprites