How to prevent background image from scrolling in form field in IE?

Question

The problem is in IE7 and 6 (I have to support 6 at work).

.myForm input { background: url(../images/input_bg.jpg) no-repeat; }



          


        

Answer 1

Tested in IE6/7/8 / Firefox / Chrome.

Add wrapper div around each input, like this:

<div><input type="text" /></div>

Use CSS like this:

.myForm input { background: transparent }
.myForm div { background: url(../images/input_bg.jpg) no-repeat; display:inline }
.myForm input, .myForm div { width: 150px }

It's not fantastic, but it works. A more eloquent way would be to add the wrapper div and modify the styles using JS if the browser is <=IE7.

Answer 2

I don't have IE6 or 7 to test, but have you tried background-attachment: fixed?

Answer 3

The following jquery fixes the issue in IE6 and IE7. If your input fields change dynamically you'll need to trigger this code each time they change, somehow.

jQuery(document).ready(function(){
    if (jQuery.browser.msie && jQuery.browser.version < 8.0) {
        jQuery('form input[type="text"], textarea').each(function() {
            var inputField = jQuery(this);
            var backgroundImage = inputField.css('background-image');
            var display = inputField.css('display');
            if (backgroundImage != 'none' && display != 'none') {
                var wrapperDiv = inputField.wrap('<div class="ie-form-input-background-image-scroll-fix" />').parent();       
                wrapperDiv.css('background-image', inputField.css('background-image'));
                wrapperDiv.css('background-position-x', inputField.css('background-position-x'));
                wrapperDiv.css('background-position-y', inputField.css('background-position-y'));
                wrapperDiv.css('background-color', inputField.css('background-color'));
                wrapperDiv.css('background-repeat', inputField.css('background-repeat'));
                wrapperDiv.css('margin-left', inputField.css('margin-left'));
                wrapperDiv.css('margin-top', inputField.css('margin-top'));
                wrapperDiv.css('margin-right', inputField.css('margin-right'));
                wrapperDiv.css('margin-bottom', inputField.css('margin-bottom'));
                inputField.css('margin', 0);
                inputField.css('background-image', 'none');            
                inputField.css('background-color', 'transparent');            
                wrapperDiv.css('zoom', 1);
                wrapperDiv.css('display', 'inline');
            }
        });
    }
});