DONT ADD ANYTHING HERE!

Original Image

The sprite is based on myFourSquares2.png (shown below)

Sprite image

Code

HTML

<div class="sprite_container">
    <div class="sprite1"></div>
    <div class="sprite3"></div>
    <div class="sprite2"></div>
    <div class="sprite4"></div>
    <div class="sprite3"></div>
    <div class="sprite1"></div>
    <div class="sprite2"></div>
    <div class="sprite3"></div>
    <div class="sprite4"></div>
    <div class="sprite1"></div>
</div>

CSS

.sprite_container {
    display: flex;
    flex-direction: row-reverse;
}

.sprite1,
.sprite2,
.sprite3,
.sprite4 {
    width: 10%;
    padding-bottom: 10%;
    background-image: url(../images/myFourSquares2.png);
    background-repeat: no-repeat;
    display: block;
    background-size: 220%;
}

.sprite1 {
    background-position: 5% 5%;
}

.sprite2 {
    background-position: 94% 5%;
}

.sprite3 {
    background-position: 5% 94%;
}

.sprite4 {
    background-position: 94% 94%;
}

Notes

  1. CSS Sprites is a technique where you use
    1. a background-image
    2. a set width and height
    3. Adjust the background-position to display only the portion you need to show
  2. This way you can use a single image and display lots of different graphics with it, saving server requests and speeding up page load times
  3. The sprite is the single, combined graphic

References

Jamie Campbell (Skillsoft)
MDN: Implementing image sprites in CSS
CSS Tricks: CSS Sprites with Inline Images
CSS Tricks: CSS Sprites: What They Are, Why They’re Cool, and How To Use Them