Hello I am currently writing a sprite generator based on CSS 3 and my question is : What is the best practice to show CSS3 background-images with a bundled sprite image based on images with different original Image Size concatenated vertical?
I have tried this here at jsfiddle,
.gui-background-brand-nodejs-64, .gui-background-brand-grayscale-nodejs-32{
background-image: url("http://www.shareimages.com/images/pics/0/0/3/65385-rJWWm5Wfk6ainac-sprite.png");
background-repeat: no-repeat;
display: inline-block;
background-size: 100%;
}
.gui-background-brand-nodejs-64{
width: 238px;
height: 64px;
background-position:0 0px;
}
.gui-background-brand-grayscale-nodejs-32{
width: 119px;
height: 32px;
background-position:0 -32px;
}
but this technique does only work if all images have the same image size. So in example the second image should have 32px height. I have worked out compromise solutions at jsfiddle
1. via extra HTML markup, but I think it is ugly and I m wondering if there is not a full CSS integration possbile to make css background-image realy usable.
2. via calculation
.gui-background-brand-grayscale-nodejs-32 {
width: 119px;
height: 32px;
background-size: 238px;
background-position: 0 -64px;
}
currently I calculating factors
X = (longest image width / current image width)
Y = sum(previous original image HEIGHTs)
background-size: {current image WIDTH*X}px;
background-position: 0 -{Y}px;
I wish the css could be defined with the width and height values of the original images because factor X can result in a decimal value. Not easy!
