random1 Posted August 28, 2009 Share Posted August 28, 2009 Hey All, I've tried to get my head around CSS image sprites but I just can't seem to get it working. Do you have any tips or example files for this? Link to comment https://forums.phpfreaks.com/topic/172277-css-sprites-for-image-backgrounds-and-ui-images/ Share on other sites More sharing options...
haku Posted August 28, 2009 Share Posted August 28, 2009 There are about a million tutorials on the net. But the concept is pretty simple. Take both your images and turn them into one image (side by side, or top and bottom). Make sure both images are exactly the same dimensions. Make the container exactly the same size as one of the images (which is now half the image). Set the normal state image as the background (it should be at the top left of your image, regardless of whether you combined images is top/bottom or left/right). On hover, change the background image position by a negative of the size of the image. Link to comment https://forums.phpfreaks.com/topic/172277-css-sprites-for-image-backgrounds-and-ui-images/#findComment-908326 Share on other sites More sharing options...
bronzemonkey Posted August 30, 2009 Share Posted August 30, 2009 But the concept is pretty simple. Take both your images and turn them into one image (side by side, or top and bottom). Make sure both images are exactly the same dimensions. That's a pretty limited use of sprites and it's definitely not necessary for the images to be the same dimensions. Just look at how amazon.co.uk uses a large sprite for all the main UI images - http://g-ecx.images-amazon.com/images/G/02/gno/images/orangeBlue/navPackedSprites_v13._V219533094_.png The key is simply to produce a single matrix of images that is then positioned as a background image where needed. Link to comment https://forums.phpfreaks.com/topic/172277-css-sprites-for-image-backgrounds-and-ui-images/#findComment-909090 Share on other sites More sharing options...
haku Posted August 31, 2009 Share Posted August 31, 2009 The guy said himself that he can't wrap his head around it. I gave him a basic solution at a level he can grasp. Sure there are more complicated ways it can be used, but everything you said is a little overwhelming for someone who hasn't even got the basics down yet. Link to comment https://forums.phpfreaks.com/topic/172277-css-sprites-for-image-backgrounds-and-ui-images/#findComment-909505 Share on other sites More sharing options...
TheFilmGod Posted August 31, 2009 Share Posted August 31, 2009 It's important to remember that a CSS sprite can't be used EVERYWHERE. A css sprite can only be used where there is a fixed width/height. Css 2.0 doesn't support background-crop. Css 3.0 fixes this though. Link to comment https://forums.phpfreaks.com/topic/172277-css-sprites-for-image-backgrounds-and-ui-images/#findComment-909716 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.