Keep images from zooming with browser

I have a single image with buttons aligned vertically. I then am using css that specifies "background-position" to show the correct button based on the class of the button. The issue I am having, is whe开发者_如何学JAVAn a user presses "cmd+" (or zooms their browser), the image "gets bigger" and you begin to see the other buttons (different colors). How can I keep the background "fixed" so that it does not enlarge with the browser.

Thanks in advance!

Here is the CSS: https://gist.github.com/b5d52ab2a2f84ed82fb4

And Preview: NORMAL: cl.ly/3d3y2D3c0D0A2T1n0f0G and ZOOOMED: cl.ly/1K2t450p2m3B2x133j04

Oddly, the effect only seems to show up in Safari (i've tested chrome, safari and firefox)

I don't see an explicit width or height specified for your image containers. Some browsers might depend on this to properly resize.

You could try setting px values, and if that doesn't work, try em, since it's a measurement relative to the size of your baseline font.

Alternately, you could use CSS3 instead of background images and just let IE have square corners.

-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background: url(sweet-gradient.png) top left no-repeat;

It seems you are suffering from the css-sprites bleeding problem.
It's not that easy to solve, since not all browsers zoom in the same manner.

One workaround is embedding the text in the button itself, this will prevent the browser from increasing the text more then the button. But this kind of defeats the purpose of css sprites..

Another workaround is to generate your text as an image using a PHP script and then put that in front of the button. This will prevent zooming while maintaning the flexibility of your current system.

Or you could also make a sprite of all the button texts you want to use and combine those 2 sprites to display the button you want.

You just forget to write all necessary parameter in background-position: attribute in your css..

Read CSS Sprite

Also Read