I would find a solution that works for IE6 and use Conditional Comments to filter out the other proper versions for IE7, FF, etc. I would also avoid using percents in the background-position for IE6 (reference).
Change
background-position:0% 50%;
to
background-position:50% 50%;
and add
background-repeat: no-repeat;
This will center the image horizontially as well as vertically and stop the image from tiling.
I just ran into this problem myself and I found that using overflow:hidden on the element with the background image solved a lot of my IE6 problems (though not all).
As advised in this answer to a somewhat related question, I'd recommend using background-position-x and background-position-y instead of background-position for IE (pre-IE8).
I'm dealing with a similar problem.
In FF the background image (an arrow) is going after the last letter of the link text anchor (if the text anchor is on two rows is respecting the same positioning) which is the way I wanted to be, but in IE6-7 on 2 rows background is displaying centered, between the rows.
Any way around this issue? Thanks
You can't use background-position with any* ie6 .png fixes the solution is to make the image a gif or a 8-bit png.
*None that I use/tried
If you have padding-top or padding-bottom in your element with background images and background-positioning -- in ie6 you can change your padding-top: 16px; to margin-top: 16px; and it fixes the problem. It doesn't push other elements away and double the padding anymore. Otherwise in ie7 and ie8 the padding attribute works.