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

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 2

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 3

http://cssspritegenerator.net是一个很好的工具，可以选择重复x或y，并且可以对任意数量的图像进行重复操作。