HTML and CSS Reference
In-Depth Information
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 .
Search WWH ::

Custom Search