css-sprites

I have this HTML: <div id="graphic">lorem ipsum</div> with this CSS: #graphic { background-image: url(image.jpg); width: 200px; height: 100px;} The background image I'm applying is 200x100 px, but I only want to display a cropped portion of the background image of 200x50 px. background-clip does not appear to be the right CSS property for this. What can I use instead? background-position should not be used, because I'm using the above CSS in a sprite context where the image part I want to show is smaller than the element on which the CSS is defined. Brent You can put the graphic in a pseudo

I have 3 different images and want to create a sprite using CSS. I understand that will reduce HTTP requests. However, I am totally new to this concept and have no idea as to how to approach this. What would be best bet for me? Also I have seen there are some CSS sprite generators where you submit a .zip of images and it combines them. I tried doing that, but did not understood what was happening. Any guidance regarding creating and using CSS sprites would be highly appreciated. Update: I have gone through the A List Part article but it was not very clear to me. Can someone provide an example

I am now getting to the point that I want to sprite the images on www.trailbehind.com. Most of the images are loaded by JavaScript functions, and I have lots of little images such as the map icons. Is there any software that supports this? I know that you can use Django-sprites if your images are in Django templates. And you can use GWT similarly, if you want to write some Java code. What's the best way to go about this for a website that is Python/Django with a Javascript front-end? I never show any HTML unless the user has JavaScript turned off. You can also use Glue . It's an open-source

One thing I have noticed on some sites is that they use one BIIIIIIIG image containing lots of little images, then use CSS background-position to define the coordinates of each image, rather than use individual images. Here's where I'm at: Cons for using big sprite sheet Need to load a large image to just display even one small image Need to write (or generate) a long stylesheet with a class for each image Cluttering CSS with lots of class definitions may impact performance If one image changes (or another is added), cache problems may be encountered both on the image and the CSS associated

I understand how to use sprites, however, isn't a "src" attribute required for IMG tags? I could always use a SPAN or other tag and set the background/width/etc but it won't be semantically correct. Basically, I'd like to omit the SRC for an IMG tag and use just sprites, but am concerned about the HTML not being technically valid because of it. Thanks. About semantical correctness: When an image has semantical meaning, so it is considered to be content, use an IMG tag , without sprites, and a correctly set up ALT. When an image is just decoration, like the background of a box, background of a

Are there any good tools to make css sprites? IDEALLY I'd want to give it a directory of images and an existing .css file that refers to those images and have it create a big image optimized with all the little images AND change my .css file to refer to those images. At the least I'd want it to take a directory of images and generate a big sprite and the .css necessary to use each as a background. Are there any good photoshop plugins or fully blown apps to do this? This will do 90% of the work for you: http://spritegen.website-performance.org/ . You'll still need to edit the rules yourself,