0

I am building a webpage where I don't use pixels in width and height. I use only percentages in order that the page fits with any device.

One of the results of such approach is that the zoom of browser doesn't affect the size of my divs (what I like very much).

Problem:

For performance, I want to use a sprite for my buttons. How can I make the sprite don't change with zoom-in/out?

The code I am using is:

<div class="add_article">
     <a  class="new_article_trigger" ></a>
</div> 

.add_article
{
    height:100%; 
    width:5%;
    float:left;

}
.new_article_trigger
{
    background: url('../images/sprite.png') no-repeat;
    height:100%; 
    width:100%;
    float:left;
    background-position: 0 -70px; 

}

Your help is appreciated.

Adib Aroui
  • 4,981
  • 5
  • 42
  • 94
  • You are building a responsive layout. Do you want to allow the user to zoom in and out? It's a common approach to fix the viewport for such use cases. Add this to the header: `` – Nico O Feb 24 '14 at 11:53
  • ..if I understood correctly, In order to use them for multiple devices you don't have to use percentages. Mobile phones that have retina displays doesn't mean they show the websites twice the resolution. (sorry link removed - wrong article) - correct link: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ – scooterlord Feb 24 '14 at 12:03
  • @NicoO.Thank you for your info. I tried the meta provided but the sprite is still zooming in/out. – Adib Aroui Feb 24 '14 at 12:21
  • @scooterlord, thank you I will read the link you provided. – Adib Aroui Feb 24 '14 at 12:23
  • 1
    I answered a question about handling sprites with percentage sizes here: http://stackoverflow.com/a/21815285/1926369 – vals Feb 24 '14 at 18:10

0 Answers0