Is there an alternative to the CSS background-size property that works on mobile devices?

In CSS3, setting background-size on the background image of开发者_JAVA百科 a button stretches it to the button height and width.

Is there an alternative to background-size, since my targets are mobile devices, and some don’t support it. I dont want to specify anything in px or em.

---

See http://css-tricks.com/perfect-full-page-background-image/ - It details a way to do this without using background-size.

---

No, not really.

There’s background-repeat, which takes one background image, and repeats it along the x-axis and/or the y-axis. Depending on what you want your button to look like, that might work: see e.g. http://sophie-g.net/jobs/css/e_buttons.htm

But there isn’t anything that has the same effect as background-size. That’s why background-size was introduced.

---

No, there isn't.

It's a new property introduced on CSS3. Many browsers already know it, but for those that doesn't, you have two main options:

• Gracefully degrade, with something like Modernizr. I think it's the better and easy approach.
• Use diferent image sizes and chose each one based on the button size (using vanilla JavaScript, jQuery, Motools, etc).

---

You can try this for IE8. My project was in MVC4 and I tried this and worked for me (IE+Chrome)

div class="logoDiv">  </div>  

and in css you define your class as

.logoDiv {  
        max-width: 100%;
        height: 100px; /*(My Image height was 100px .....You please define yours)*/
        background: url("../Images/logo.jpg") no-repeat;
        background-size: cover; 
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../Images/.logo.jpg.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../Images/logo.jpg', sizingMethod='scale')";   
    }