How to repeat only one part of my sprites image as a background for div

Question

I need put one only one part of my sprites image as a div background but the result is this:

And I pretend this:

I need, use only one sprites image in my template (requirement from my boss). I need help for this.

My html:

<div class="background"></div>

My Css:

.background {width: 100%; 
             height: 166px; 
             background-size: 93px 166px; 
             background: url('library/images/sprites.png') -150px 0px repeat-x; 
            }

Answer 1

You can only repeat the sprite in one direction.

To repeat the sprite horizontally you would need to edit the sprite so that the image you want to repeat is underneath the others with nothing else either side of it.

Then the code you provided should work (altering the position to suit).

Answer 2

Unfortunately you're going to have to make a separate file if you want to repeat both x and y. If you wanted x or y, you could use the below to help guide you as answered here.

repeat-X: You would stack these vertically in your sprite sheet. You can only have one image per "row". All images must have the same width.

repeat-y: You would line the images horizontally and have only one image per "column". All images must have the same height.

It shouldn't hurt the load time too much!

Answer 3

http://cssspritegenerator.net is a good tool to help you with that, you choose either to repeat x or y and can do that for as many images you want.