I've been looking at automating sprite sheet generation (placement
of multiple background images in a single image file).
Sprites present some difficulties. For example, there needs to be
enough space between the separate images so that if the container
element grows adjacent sprites are not revealed (on browsers that
do not scale background images).
Another difficulty is that the images from a sprite must be given
fixed positions, so an image cannot be centered (on browsers
that do not scale background images).
That is, if the non-sprite image is applied like this:
a.offsite {
padding-right: 10px;
background-image: url(external_link.png);
background-repeat: no-repeat;
background-position: right center;
}
Then with a sprite (with the image aligned on the right in the sprite
sheet):
a.offsite {
background-image: url(sprite.png);
background-repeat: no-repeat;
background-position: right -1235px;
padding-right: 10px;
}
So, on browsers that do not scale the image, the height of the <a>
will effect the "centering" of the image.
Is there a way to use an image in a sprite and still manage to
get it to center regardless of the size of the container?
It's been suggested to me that a background image, like the above
external link icon above, should always be placed in its own container
and given a width and hight.
I'm against adding markup just to hold background images, plus, I'm
not sure that can even work without some content in the container.
And even then I don't see how that can solve the vertical alignment
issue.
Do you use any kind of automated sprite generation? Or is your
approach to create the sprites manually (i.e. use a graphics program
to create sprite sheets)?
Our premise is to move sprite generation to the application build
process. That is, the css developer would use individual background
images, and then later a program would look at the css, build the
sprite images and alter the css.
The more I look at this in detain the more I'm finding doing this
correctly questionable.
Thanks,
--
Bill Moseley
[EMAIL PROTECTED]
Sent from my iMutt
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
