Alternate to background-size property to use in IE8

Question

I have to resize the buttons on the screen initial size of button 157*70px and required size on screen is 100*50px. It has to be compatible with IE8 where the background-size property is not working although this property works fine in FF.

HTML:

<div id="return_button">
<a class="new_return_button" name="PREVIOUS">Previous</a>
</div>

CSS:(Firfox)

.new_return_button{
background: url("images/previous.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
backgound-size: 100px 50px;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 70px;
line-height: 70px;
width: 157px;
}

#return_button{
color: #FFFFFF;
font-weight: bold;
height: 70px;
left: 10px;
line-height: 70px;
margin: 0;
position: absolute;
text-align: center;
width: 157px;

}

This css works fine in Firefox with background-size property and shrinks the image of 157*70px to area of 100*50px but doesn't work in IE8.

Please suggest a solution to this issue

You may want to [read this article on the subject](http://spudley.com/blog/css-background-size-and-browser-support). Includes link to the best soltution, which is to use CSS3Pie to polyfill support for this feature into IE8. — Spudley, Nov 07 '13 at 11:35
possible duplicate of [background-size in different browsers](http://stackoverflow.com/questions/18135535/background-size-in-different-browsers) — Spudley, Nov 07 '13 at 11:37

score 0 · Answer 1 · answered Nov 07 '13 at 12:20

One way to solve this is to use another element. You probably need to tweak the margins of the <span> to have it working as desired. Also note that this does not guarantee a specific height, instead it will give you the correct aspect ratio for the scaled graphic.

<style>
#return_button {
  position: relative;
  width: 100px;
}

#return_button img {
  max-width: 100%;
  height: auto;
}

#return_button span {
  position: absolute;
  top: 50%;
  margin-top: -5px;
  left: 10px;
  right: 10px;
  text-align: center;
}
</style>


<div id="return_button">
  <img src="images/previous.png" alt="Button graphic">
  <span>Button label</span>
</div>

Alternate to background-size property to use in IE8

1 Answers1