using sprite for background

Question

I currently have the following:

html {
    background-image: url('../bundles/app/img/bg-tile-main.png');
}

now since I've put bg-tile-main.png into a sprite.. how can I have the same effect as the above? As far as I have researched I can't repeat background when using sprite?

Answer 1

you can't do that yet, in future you will be allowed to use

background:image-rect(url('img.png'), 16, 16, 16, 16) repeat top left;

currently supported only by Firefox

more info here:

https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-image-rect

example on MDN:

https://developer.mozilla.org/samples/cssref/moz-image-rect/ (works only on FF atm)

Answer 2

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;
}

JSFiddle

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.