css-sprites

I've installed Google mod_pagespeed on Apache 2.2 and everything seems to be working except for the fact the image spriting is not working. I've set the LogLevel to debug and the only message I'm getting is: [Mon Mar 10 17:51:58 2014] [info] [mod_pagespeed 1.6.29.7-3566 @26487] Attempting to sprite css background. No further messages related to spriting show up in the logs. I can also confirm the Image Spriting is switched on: /mod_pagespeed_statistics?config Configuration: Version: 13: on Filters ah Add Head cw Collapse Whitespace cc Combine Css jc Combine Javascript gp Convert Gif to Png jp

I'm working on my first actual wordpress site and i'm having some troubles with some jquery. I really hope that someone can help me out here. So what i want to do is to position my div background depending on the map area currently hovered. I found an example here: http://ubytujnaslovensku.sk/sk/ What i got: HTML: <div id="front-cubus-wrapper"> <div id="front-cubus"></div> <div id="front-cubus-hover" style="background-position: 0px 0px;" ></div> <img alt="cubus" src="/wp-content/uploads/2013/10/cubus_index_blanko.png" usemap="#map"/> <map id="map" name="map"> <area title="Communication" alt=

I'm generating CSS sprites. I want to use these sprites at multiple sizes. I've searched but haven't been able to figure out how to functionally scale a CSS sprite--e.g. if the original sprite is at 150x150 and I want to display it at 50x50, how can I do that? background-size seems to break it. I can just generate the sprites at the needed sizes, but when I do this via ImageMagick's -resize I take a noticeable resolution hit. Usually, if I find an image is unacceptably low resolution on a webpage, I just make a bigger image and scale its size, functionally increasing the resolution of the

I am trying to get a magnifying glass as the background for my input element. The magnifying glass icon is part of a CSS sprite that looks like this: To position it, I've used these properties: #search-form input[type="text"] { background: url('../images/icons.png') no-repeat left center; background-position: 0px -30px; border: 1px solid #a9e2ff; padding: 3px; width: 200px; font-size: 1em; padding-left: 20px; } But the background still appears at the top of the input box rather than aligned in the vertical middle and to the left. I've also tried doing: background: url('../images/icons.png') no

I have a sprite animation, a small cannon rendered using a 3D app. I have exactly 360 frames for a 360 degree turn. Each image has a 100x100 pixel size. So basically what I am trying todo is when I click anywhere in the page, the barrel of the cannon needs to rotate to point at the mouse cursor, sound simple maybe but I can't really get it to work very well, perhaps cause my math skills is lacking :P What I currently have is something like this /* This is my div with the cannon background image (360 images stitched into one) each "image area" is 100x100px */ obj.cannon = $('#cannon'); /* Get

We all know that CSS sprite images are great to reduce the amount of requests and such, but what about the performance of the browser rendering the page with several elements using a big image as a background? on slower machines equipped with older browsers (like IE6/IE7) you can notice significant performance drop when you're using very big images many times on one page. It's even more severe, when you're using sprites for :hover states. You have to moderate your temptation towards pushing all your sprites to one huge image - think about which elements are part of the website/webapp UI and