background-size
is a CSS3 property. Unfortunately, It is only supported in IE9+. Before CSS3, the background image size was determined by the actual size of the image.
The fix:
IE specific hack...
- Lets say in html you have:
<table id="main">
<tr>
<td id="bg">
some content
</td>
</tr>
</table>
- Create two stylesheets, one for CSS3 compatible (main) stylesheet and one for IE8 and lower browsers.
In CSS3 stylesheet
#bg {
background:url(someimage.gif);
background-size:100% 71px;
}
IE8 fix in another stylesheet named ie.css
#bg {
background: no-repeat center center fixed;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='someimage.gif', sizingMethod='scale');
}
- Add the css to your html, ie8 css using a conditional statement.
In <HEAD>
add the following
<!--
Implementation Note:
This filter scales the entire image to fit in the allocated area. If your td is greater that 71px in height, this may cause issues.
Good Luck!