Page is a not externally linkable
- Code, Content, and Presentation
-- CSS
---- sprites and repeating background images


alt131 - 5:12 pm on Jun 9, 2011 (gmt 0)


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.


Thread source:: http://www.webmasterworld.com/css/4322731.htm
Brought to you by WebmasterWorld: http://www.webmasterworld.com