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; }


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

In IE when you type in the input field, once you reach the end the image stops repeating and text is shown without any background image in the back of the input field. In firefox and other browsers including IE8 the text just scrolls but the image stays in place. Why does it end in IE7 and 6?

P.S. I can't remove no-repeat in the image since it has borders and you can tell it's repeating in a weird way.

how is it that you're having the exact same problem i'm having. I saw this Adobe link with some more info: http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=3821&productId=1 — Roy Rico, Jan 18 '11 at 22:06

score 2 · Accepted Answer · answered Jan 18 '11 at 21:47

2

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.

answered Jan 18 '11 at 21:47

thirtydot

224,678
48
389
349

Do you have a solution for this: http://stackoverflow.com/questions/12544915/ie-input-background-image-issue?lq=1 – Francisco Corrales Morales Apr 21 '14 at 16:08
@FranciscoCorrales: I don't think there is a good (CSS only) solution. HTML changes (or JavaScript) are required, similar to what I did in this answer. Hiding the images for IE7/8 isn't even a big deal, unless it affects an overwhelming percentage of your users. If you provide a [jsFiddle demo](http://jsfiddle.net/), I can have a quick look. – thirtydot Apr 21 '14 at 19:59
Thank you. I already give up wit I.E 8, I did it by hiding images, and workarounds... I didn't want to, but I.E 8 give me no choice. – Francisco Corrales Morales Apr 21 '14 at 20:13

score 1 · Answer 2 · answered Jan 05 '12 at 11:02

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

score 0 · Answer 3 · answered Jan 18 '11 at 20:45

0

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

answered Jan 18 '11 at 20:45

Michael Itzoe

1,949
4
29
49

background attachment just worked for IE6 but in IE7 the entire background is now gone. Ahh stupid IE #$*! – Joe Jan 18 '11 at 20:54
1

background is not gone, but now is fixed to the actual window. doesn't help your problem, just a clarification. – Roy Rico Jan 18 '11 at 22:05

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

3 Answers3

Linked