Overflow in input field with background image ie

HTML & CSS
1

Hi.
I have an input field with a background image like this:

 .topbar-input
    {
        width: 76px;
        height: 18px;
        border:none;
        background: transparent url(../images/structure/bg_input.png) no-repeat;
        padding-left: 5px;
    }

The problem is that in IE, when the text i type is bigger than the background image it pushes the background to the left until it disapears.

In firefox it works fine.

EDIT: background-attachment: scroll; seems to fix the problem but the text still appears a litle out the background image,

Thanks for your help.

2

You’ve not added a background position
Also, you might find a problem when users zoom with the Ctrl +/-
It’s best not to have padding on an input if you can help it. Either add the padding to a container or to the other elements close by