CSS Sprite background repeat

[persianlity]

hi,
Background image repeat-x Or y not work for me.
HTML :

CSS :

#box{width:220px; height: 230px; margin:0 auto; }

#box .t {width:220px;height:40px; margin:0 auto;background-image:url(../images/main.png) ;background-position:0 0; background-repeat:no-repeat;}

#box .m {width:220px;height:180px; margin:0 auto;background:url(../images/main.png) repeat-x  0 -40px;} */repeat-y */

#box .b {width:220px;height:10px; margin:0 auto;}

This Printed only background of m class without repeat-x or y . How To Fix This ? this type of writing css for sprite is optimized?

Thanks.

[Senff]

You have an example where we can look at this?

[persianlity]

Online Demo : http://jsfiddle.net/cAbYF/

[Senff]

It doesn’t show vertical repetition because the box is 180 pixels high and the image is 300 pixels high, so you won’t see the next instance.

If I understand correctly what you’re trying to do: you can’t take an area of a sprite, apply it to a box as the background and have (only) that area repeated — it will repeat the entire sprite image.

[persianlity]

Sorry Senff! In Fact, My Mean Is repeat-y . in repeat-y not repeat blue border of 180px height div.

[Senff]

Again, it will not repeat-y (vertically) because the box is 180 pixels high and the image is 300 pixels high. That, and the fact that you have it commented out in your CSS.

[persianlity]

main image for all images of pages! is not Only for this box. all image sprite in main image 220*300. now i need to border of left and right of m(class) with images (sprite 0 -40). now how to work sprite for my mean .
Thanks

[Author]

Posts