title: What exactly are the rules for avoiding the "mixed content" warning in IE due to background images?
body: <p>This is related to <a href="https://stackoverflow.com/questions/1548551/ssl-and-mixed-content-due-to-css-background-images">SSL and mixed content due to CSS background images</a> but that question had no accepted answer and the one I'm asking is a little more specific.</p>
  
  <p>Under some circumstances when accessing an HTTPS website, IE will throw the "mixed content" warning if an element is given a style with a background image. I found <a href="http://www.google.com/url?q=http://w3schools.invisionzone.com/index.php?showtopic=38342&amp;st=0&amp;p=212538&amp;#entry212538&amp;sa=D&amp;sntz=1&amp;usg=AFrqEzdoStGPB3vBUxYPdNjB4AGB7G9umw" rel="nofollow noreferrer">one forum reference</a> that said the warning can be avoided if you put the reference in a stylesheet, for example</p>
  
  <pre><code>#someElement a {
      width:11px;
      height:11px;
      display:block;
      overflow:hidden;
      background:url(../images/sprites_list.png) no-repeat;
      cursor:hand;
      cursor:pointer;
      background-position:0px -72px;
  }
  </code></pre>
  
  <p>but not if you try to create the element inline, a la</p>
  
  <pre><code>$('#someElement').append("&lt;a title='something' style='background: url(../images/sprites_list.png) no-repeat; ... // etc
  </code></pre>
  
  <p>and indeed, this works for me. I've seen others that say you have to use an absolute <code>https</code> URL to refer to the image, rather than a relative one.</p>
  
  <p>What is the real story here? Is there some "official" explanation or at least a reference to what the rules are? Or failing that, is there a standard set of guidelines which if followed makes it extremely unlikely to trigger the warning?</p>