IE7 Bug on Button Background Images

IE7 has a very weird bug regarding background images on buttons. If you have spiced up your web form buttons by having a defined CSS class (or for the input tag itself) defined something like this with a tiling background image:


.button
{
background-color: #FFAB41;
background-position: left top;
background-attachment: fixed;
background-image: url('Images/ButtonTile.gif');
background-repeat: repeat-x;
border-top: solid 1px #FEF4CF;
border-left: solid 1px #FEF4CF;
border-right: solid 1px #BC8801;
border-bottom: solid 1px #BC8801;
color: #004276;
font-weight: bold;
}


Then you will find it works perfectly in IE6 and other browser but not in IE7. In my case I tested it with a PNG image instead of GIF as well as other changes to no avail.

I found that it works in both IE6 and IE7 by simply removing this line:


background-repeat: repeat-x;


Why? I don't know. In fact, the image shouldn't even tile without this line; however, it does in both browsers and will work fine with this line removed.