Along with background-image
, you need to give the background-position
. Then you can repeat a particular image in the spritesheet.
For getting the position, use spritecow,an online tool.
Updates:
Here is my sprite image
#rr {
background: url('http://files.simurai.com/misc/sprite.png') repeat-y -257px -8px;
width: 40px;
height: 661px;
}
FYI: Where repeat-x
is not working, since the width covers the image specified.
Here is a pretty heck about repeating the background-position
,
Background repeat and CSS sprites
The rule is pretty simple: if you want the background to repeat
vertically (top to bottom), place the images in the sprite
horizontally (left to right) and make sure the individual images in
the sprite have the same height. For the opposite case: when you want
to repeat horizontally, sprite vertically.