Image Sprites

An image sprite is a technique in CSS (Cascading Style Sheets) used to combine multiple images into a single image.
This is done to reduce the number of server requests when loading a webpage, which can improve page loading times.
Image sprites are commonly used for creating buttons, icons, and other user interface elements.

How you can create and use an image sprite in CSS:

Gather all the individual images you want to combine into a single sprite image. These can be icons, buttons, or any other images.
Use an image editing tool, such as Photoshop or GIMP, to create a single image that contains all the individual images. This single image is your sprite sheet.

Add the Sprite Image to Your HTML:

In your HTML file, add an <img> element to display the sprite image. Set the src attribute to the path of the sprite image.

<img src="path-to-your-sprite.png" alt="Image Sprite">

Example:

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">
      .sprite {
         background: url("Capture.png") no-repeat;
         width: 280px;
         height: 200px;
         display: inline-block;
      }
      
      .flag1 {
         background-position: 0px 0px;
      }


      .flag2 {
         background-position: -255px 0px;
      }

      .flag3 {
         background-position: -510px 0px;
      }
      .flag4 {
         background-position: -765px 0px;
      }
         body {
         text-align: center;
      }
   </style>
</head>
<body>
   <div>
      <h1>Flag Image Sprite</h1>
   </div>
   <div class="sprite flag1"></div>
   <div class="sprite flag2"></div>
   <div class="sprite flag3"></div>
   <div class="sprite flag4"></div>
</body>
</html>

Output: