web app CSS navbar retina icons - How can I fit a 60x60 icon into a 30x30 background-image on IE7+8?

Question

I'm trying to make a cross browser CSS nav-bar for mobile and desktop using Jquery Mobile.

I don't want to use media queries for retina/non-retina devices, so I'm basically trying to use a single hi-res CSS icon/sprite on all devices. The following works nicely except on IE7+8.

HTML

<span class="hasIcon">
   <span class="someText"></span>
   <span class="someBackground"></span>
</span>

CSS

 .hasIcon {
   display: inline-block;
   position: static;
   height: 30px; width: 30px;
   background-color: none;
   background: url("http://www.franckreich.de/x/IMG/gen/6060dummy.png") no-repeat;
           background-size: 30px 30px;
        -o-background-size: 30px 30px;
   -webkit-background-size: 30px 30px;
      -moz-background-size: 30px 30px;
       -ms-background-size: 30px 30px;
   }

JsFiddle example here

Of course this breaks in IE7+8, as backgrond-size is not supported...

My question: Does anybody have an idea how I can achieve this effect on IE7+8?

Solutions, I don't want to use:

CSS Media Query for retina/non retina = miss out on good looks on desktop
put retina/non-retina icons in single sprite & position accordingly = works so-so & serving bigger file

Curious to see if anybody can help me out.

Thanks!

score 0 · Accepted Answer · answered Aug 19 '11 at 08:25

0

You can use a filter: http://jsfiddle.net/thirtydot/QTT4N/3/

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='http://www.franckreich.de/x/IMG/gen/6060dummy.png',
            sizingMethod='scale');

http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx

answered Aug 19 '11 at 08:25

thirtydot

224,678
48
389
349

Thanks. Trying to get this done using sprites instead of a single image. – frequent Aug 19 '11 at 08:37
Then it **can't** be done using CSS in IE7/8. An ugly JavaScript/jQuery workaround would be possible. – thirtydot Aug 19 '11 at 08:39
mh. I wanted a CSS only solution, plus ugly scares me away :-) Trying some stuff, then I will woefully accept. – frequent Aug 19 '11 at 08:48
1

didn't work out. I guess I'm back to putting retina and non-retina icons in the same sprite. Thanks anyway :-) – frequent Aug 20 '11 at 07:37

score 0 · Answer 2 · edited May 23 '17 at 11:47

0

Duplicate of IE 8: background-size fix. Short answer: Use IE Filter. http://www.pziecina.com/design/turorial_demos/resize_background.php

edited May 23 '17 at 11:47

Community

1
1

answered Aug 19 '11 at 08:26

Sheepy

17,324
4
45
69

Thanks. Trying this out. Let's see if it works with sprites aswell. – frequent Aug 19 '11 at 08:36

web app CSS navbar retina icons - How can I fit a 60x60 icon into a 30x30 background-image on IE7+8?

2 Answers2