Menu
In one of the recent Stackoverflow podcasts, Jeff talked about having a single image file having all of those tiny images that are all over a page and then cutting it with CSS so that all the images get displayed correctly. The whole point is to reduce the number of server requests so that the page gets loaded faster. I was like "wow, that's really cool, I could really use this in our product".
My question is: How is this done with CSS? I need to load the images with background-image, but then how do I specify the offset of the sub-image in the large image? That is, suppose that there is a hammer icon in the large image at (50px, 50px) and it has a size of 32px * 32px, how can I force the browser to only display that bit?
272
The PNG, JPEG, and GIF formats are most often used to display images on the Internet. Some of these graphic formats are listed and briefly described below, separated into the two main families of graphics: raster and vector.
Simply visit the Acrobat Online website and upload the files you want to merge. Reorder the files however you like and then click Merge files. After that, just download the merged PDF. This will combine all the JPGs-turned-PDFs into a single PDF you can easily share or view.
A Polyptych – Many pictures in one image. A Photomontage – many photographs in one image. A Photomosaic – very many photographs, or elements of photos, creating a new pattern or picture.
Basically you use your single image as the background image, but move it off (to the left and up) by the offset of the image you want to display. E.g. to display the hammer icon:
.hammer
{
background: transparent url(myIcons.jpg) -50px -50px no-repeat;
}
But as far as I know, you have to make sure that the element that's using the background image has the correct size (e.g. 32x32 px).
A search for CSS Sprites will give you more information.
118
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
