Geek asks and answers

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

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

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


<form class='myForm'>
     <input type="text" />
     <input type="text" />
     <button>Submit</button>
</form>

In IE, when you enter an input field as soon as you reach the end, the image stops repeating and the text is displayed without any background image at the back of the input field. In firefox and other browsers, including IE8, the text simply scrolls, but the image remains in place. Why does this end in IE7 and 6?

PS I can’t remove the no-repeat in the image, since it has borders, and you can say that it repeats in a weird way.

0
source share
3 answers

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

Add a wrapper divaround each entry, for example:

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

Use CSS as follows:

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

, . div JS, <= IE7.

+2

jquery IE6 IE7. , , . -.

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');
            }
        });
    }
});
+1

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

0
source

More articles:


All Articles