title: Chrome is reporting page is unsecure with mixed content for data:image/png;base64
body: <p>Chrome is reporting that I have mixed content when serving up a page over HTTPS in my MVC project. I have tracked it down to the following CSS rule:</p>
  
  <pre><code>select option:checked, select option:hover {
      background: #3399ff url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAEAQMAAACTPww9AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABlBMVEUylfj///+2X69TAAAAAWJLR0QB/wIt3gAAAAtJREFUCNdjYIAAAAAIAAEvIN0xAAAAAElFTkSuQmCC") repeat scroll 0 0;
  }
  </code></pre>
  
  <p>and in particular the <strong>data:image/png;base64</strong> embedded image. If I take that out then the page passes. </p>
  
  <p>I would still like to keep the CSS as is, but what do I need to change it to so that it serves it up using HTTPS? As the underlying CSS is being served up via HTTPS I cannot see that I would need to change the background property declaration?</p>