Page 138 - CSS

Chapter 18: CSS Image Sprites

Syntax

• //Using background-position
background: url("sprite-image.png");
background-position: -20px 50px;
• //Background property shorthand
background: url("sprite-image.png") -20px 50px;

Remarks

For some use cases, sprites are slowly falling out of favor, being replaced by icon webfonts or
SVG images.

Examples

A Basic Implementation

What's an image sprite?

An image sprite is a single asset located within an image sprite sheet. An image sprite sheet is an
image file that contains more than one asset that can be extracted from it.

For example:

The image above is an image sprite sheet, and each one of those stars is a sprite within the sprite
sheet. These sprite sheets are useful because they improve performance by reducing the number
of HTTP requests a browser might have to make.

So how do you implement one? Here's some example code.

HTML

<div class="icon icon1"></div>
<div class="icon icon2"></div>

https://riptutorial.com/ 116