sprites and repeating background images

slicing sprites

[mihomes]

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?

[alt131]

Hi mihomes,

Unfortunately you are right - background-images repeat in full, not parts or "slices". I've looked at this several times since you posted the question, but nothing has occurred to me yet. That includes thinking about some of the options available in the css3 "Backgrounds and Borders" module. There has been some discussion about adding a "background-image-slice" property that would do what you want, but no developments on that yet.

So not an ideal response - but a fascinating challenge. Can anyone else think of another approach?

[mihomes]

It is possible... but all horiz repeats need to be together and all vertical need to be together... you then make sure the width is the same on all, or the height is the same...

For instance... all horiz repeats are aligned vertically with the same width.

[mihomes]

Not very practical though it what I am trying to say...

[alt131]

Well, that would depend on what you were trying to do :)

I may have been incorrect, because I read "collection of images" as a collection similar to below - of the sort used by amazon.com which is a common example.
|||||||||||||||||||||||||||||
||####|||****|||^^^^^||
||####|||****|||^^^^^||
|||||||||||****|||^^^^^||
||%%||~~~~|||||^^^^^||
||%%||~~~~|||||||||||||||

- and the goal was to repeat just one of those images horizontally and vertically across the background of any element.

The technique you described is different because the image "collection" is specifically prepared to suit the element's width/height and the element is sized according to the width/height of the image that will be visible.

As you say, that has limitations, but I got some interesting results using the before and after pseudo elements - although that defeats the purpose if sprites are being used to reduce server hits. There is also the technique of making the dimensions of the image collection large enough to avoid other images being visible, and/or "layering" multiple backgrounds to create the repeating effect - with the obvious disadvantage of increased image size, therefore increased bandwidth consumption, and/or increase hits as well.

Was this a general question, or did you have a specific code situation in mind? I ask because although the above aren't suitable as general solutions, it might be possible to think of a technique to achieve the desired outcome if you provide a bit more detail.

[mihomes]

You were correct in the manner I was using this - one single 'collection of images' which would be used on most pages.

So, basically the only thing I could do is have a seperate image file for certain background repeat images... I might play around with it later today and will post some results, however, combining two or three images that repeat into one would not be a very huge savings...