title: Text input background scrolling in IE7
body: <p>I think most of us know about this annoying bug in IE7 where the background image of a text input will scroll if the text entered is longer than the width of the text input.</p>
  
  <p><a href="https://stackoverflow.com/questions/4728717/how-to-prevent-background-image-from-scrolling-in-form-field-in-ie">Numerous</a> <a href="http://pure-essence.net/2008/02/28/ie-input-background-image-issue/" rel="nofollow noreferrer">questions</a> have been <a href="https://stackoverflow.com/questions/4728717/how-to-prevent-background-image-from-scrolling-in-form-field-in-ie">asked</a> and <a href="http://blogs.creative-jar.com/post/Input-backgrounds-scrolling-in-IE.aspx" rel="nofollow noreferrer">blogged</a>.</p>
  
  <p>Those questions and post all require one to wrap a <code>div</code> around the text input. This is something that I cannot do as I am working with markup generated by a CMS.</p>
  
  <p>However, I would like to gracefully degrade the experience. For IE7 and below, I am happy with not displaying the background image and just displaying a color.</p>
  
  <p>This is the css being used:</p>
  
  <pre><code>form input[type="text"], form input[type="password"]{
      background-image: url('bg.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
  
      padding-left: 4px;
      padding-right: 4px;
  
      width: 100%;
      height: 30px;
          border: #008296 1px solid;
  }
  </code></pre>
  
  <p>I have tried adding <code>background-attachment: fixed</code> but the background-image ceases to be shown in all versions of IE, firefox and chrome! Since I only want this behaviour for IE7 and below, how can I go about doing this besides creating an IE7 only stylesheet?</p>