User Interaction and the HTML5 APIs - HTML5 Mastery: Semantics, Standards, and Styling - page 301

overflow: hidden;
}
Next we add a rule for the span so that it is styled to be a block-level element as well
(pushing the other textual content out of the way). This is where the background image
sprite (named "controls.png" ) is attached:
…
.video_controls span {
display: block;
background-image: url(controls.png);
background-repeat: no-repeat;
width: 40px;
height: 40px;
background-color: #ccc;
}
Lastly two CSS classes are created that set the position of the background image,
moving it to show the play symbol or pause symbol:
…
.pause {
background-position: -45px 5px;
}
.play {
background-position: 5px 5px;
}
That's it! The play and pause buttons are derived from the same image, as shown in
Figure 7-6 .