CSS background-image giving mixed content warning over SSL

I've tried numerous methods to load my CSS background images over SSL without resulting in the mixed content warning.

On this page for example: https://www.statcentric.com/login/default.aspx

You can see that the message is coming up.

For the logo (logo.png), I've tried using the protocol-less method like so:

span#logo
{
    background: url(//www.statcentric.com/images/logo.png) no-repeat scroll 0 0 transparent;
}

For the background (bg.jpg), I've tried using a relative path like so:

body
{
    color: #191919;
    background: #f2f2f2 url(../../images/bg.jpg) repeat-x top;
开发者_高级运维}

However, as you'll see, both of these images are still being flagged as mixed content.

Any help is appreciated!

---

Have you tried pathing your images from the root? ex. url('/images/bg.jpg')

---

Depending on your tolerance for older browsers, you might look into making your images inline with base64 encoding; data URIs in other words.

• https://en.wikipedia.org/wiki/Data_URI_scheme#CSS
• http://www.websiteoptimization.com/speed/tweak/inline-images/

It does make your css files bigger and maintenance harder, so you'll have to weigh the size of css file versus the cost of the SSL request. For small images, I usually find the size of the css file is the better way to go.

The other option I know if two different css files; one for ssl and one for not.