mihomes - 5:39 am on Jun 7, 2011 (gmt 0)

Been fooling around with sprites lately and having trouble using them as a repeating background...

For instance, say I have this :


#footer{
width:100%;
background-image:url('/images/footerback.png');background-repeat:repeat-x;
height:66px;
line-height:66px;
font-size:11px;
color:#888888;
text-decoration:none;
}


Lets say footerback.png is 15x66 pixels and is my repeating background for the above div. As shown it works fine.

Now, what if footerback.png is part of a collection of images... say... sprite.png at x=0 y=50...

Is it possible to repeat that specific portion of the image? I can get the footer to start off at the right position, but it repeats the entire sprite.png and not the specific portion of it I wish.

Is it even possible to use css sprites as repeating backgrounds or must they be contained within a defined size...ie non-repeating?