精灵图像重复x

Question

i have one image and i want to set this image into diff. place like heading image plack.
i am done this to sprite.

<style type='text/css'> 
    img {
        margin: 5px;
        border: 1px solid silver;
    }

    .sprite {
        width: 20%;
        background-image: url('sprite.png');
    }

    .sprite.head {
        background-position: 0 -47px;
        height: 70px;
    }           

    .sprite.logo {
        background-position: 6px 0;
        height: 43px;
        width: 250px;
    }

</style>
<div alt='smile' title='smile' class='sprite head'></div>   
<div alt='fish' title='fish' class='sprite logo'></div>

this is the my

Try

i want to set heading repeat.
black image repeat.
thanks.

Answer 1

Sprites do not work this way.

You cannot repeat a part of the background-image with pure css alone.

Don't wrestle with this. Make the background-image a image of itself and use that. Don't do repeats in sprites.

---

edit

BTW, that's not the whole story. It is possibly under certain circumstances as easwee stated in his/her comment. But it's not worth the fuss. Because you always have to see, if you whole sprite thing is not destroyed by it. So, I will not bring a solution to this.

Answer 2

It can be done but with limitations and loss of sprite optimal space use .

What you can do is to:

1.) Extend the part you want to repeat across the whole width of the image sprite. It has to be in it's own row.

2.) Set a fixed height to the element that needs the repeated background (to ensure the parts of the sprite below the repeat pattern won't be visible if the element breaks in two lines).

3.) Set background-repeat: repeat-x

Fidle: http://jsfiddle.net/kZLsL/4/

Answer 3

You can't repeat just part of the image.

I would suggest you use a separate image for your background.

You can also edit your image sprite to stretch the part you want to repeat to cover the full width of your image sprite. This has the benefit of reducing the number of get requests when loading the page.