Chrome Hiding Background Image With Autofills

Hi guys Im working on basic signup and signin forms.In my input fields I consist of background image and white color.In chrome autofill was replacing my background image and color

Solution 1:

IMHO, you can do this in 2 ways

1: put a z-index field on your css to your background image so that it overlaps whatever is overlapping it at the moment

z-index: 999//for example

2: Or make your image have top-margin to make way for the input field's autofill space:

margin-top: 25px;

Solution 2:

Try the change with jQuery:

if ($.browser.webkit) {
    //$('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="password"]').attr('background-image', 'src');
}