HTML and CSS Reference
In-Depth Information
<i class="t-artist__image artist-tinariwen"></i>
We do this for each of the artists. Then, in our style.css , we add the following
code snippet:
.t-artist__image {
background: url(../img/artists-image.png) top
left no-repeat,
url(../img/bg-artist.png) no-repeat center
center;
float: left;
display: block;
}
.artist-asa { background-position: -0px -0px,
0 0; }
.artist-kidjo { background-position: -0px
-100px, 0 0; }
.artist-kuti { background-position: -100px
-0px, 0 0; }
.artist-sangre { background-position: -100px
-100px, 0 0; }
.artist-tinariwen { background-position:
-200px -0px, 0 0; }
.artist-toure { background-position: -200px
-100px, 0 0; }
Nothing has changed in the final page, except we have now reduced the number of
network requests to 1 instead of 6 for these images. By optimizing the final sprite,
we can make this request even faster.
Generating a sprite would seem like a lot of work, but there are many tools to help
with this.
CSS sprites from within Adobe Photoshop
Using the instructions documented at arnaumarch.com/en/sprites.html , you
can use a script file from Photoshop to select a folder of images and also generate
Search WWH ::




Custom Search