How to call images from CSS when page are loaded using https

Question

This one is driving me nuts. It's (yet) another IE6/7 idiosyncrasy, but one of my web pages needs to be loaded using https. In IE6/7 I get the dreaded "contains secure and nonsecure items" message which is causing users to panic. I've gone through the code top to bottom and isolated the problem (as IE sees it) to background images in my CSS. However, these use absolute paths...

background: url(/images/imagename.jpg);

Looks like this is tripping up IE and causing the nonsecure message on https. Anybody got any ideas how to get around this? Any help much appreciated.

Answer 1

Try with:

background: url(//images/imagename.jpg);

According to this answer that should work. Try using it for the stylsheet as well, eg:

<link rel="stylesheet" type="text/css" src="//style/style.css" />

Answer 2

That shouldn't be causing you any troubles, as long as the CSS file itself is also coming from HTTPS. Absolute paths without an explicit protocol (i.e. /path/to/file instead of http://example.com/path/to/file) inherit the protocol of the file calling them, be it HTML or CSS.

Can we see your page? It's possible there's something else on the page you're overlooking.

Answer 3

You are correct, relative url paths in background style will cause this message to appear in IE6/7.

The only method I have used successfully, is to either build the absolute path from available browser data, or to hard code the absolute path. Here is an example of how you can build the absolute path with JavaScript:

Using a top level style definition like this:

<style type="text/css">
    .fixBgImage {
     background: url(/images/imagename.jpg);
 }
</style>

You can use a JavaScript function that looks up that rule, and changes the backgroundImage style for that rule. (Keep in mind that this example assumes you've defined the rule on sheet[0])

        // this function needs to be run after the page has loaded
        // (body.onload, window.onload or something similar)
        function fixBackgroundImages() {
            // using sheet 0 defined first on this page
            var rule = getRule('.fixBgImage', document.styleSheets[0]);         
            if (rule != null) {
             var bgUrl = rule.style.backgroundImage.replace(/^url|[\(\)]/g, '');
             bgUrl = fixHttpsBgUrl(bgUrl);
             rule.style.backgroundImage = 'url("' + bgUrl + '")';
            }
        }

        function getRule(name, sheet){
            var rules = (sheet.rules) ? sheet.rules : sheet.cssRules;

            for (var i = 0; i < rules.length; i++) {
             if (rules[i] && rules[i].selectorText == name) {
              return rules[i];
             }
            }

            return null; 
        }

       // This function returns an absolute path if https is used
       function fixHttpsBgUrl(imgUrl){
          if (document.location.protocol.indexOf('https') >= 0){
            var basepath = document.URL.substring(0, document.URL.lastIndexOf('/') + 1);
            var pcol = document.location.protocol + '//';
            var host = document.location.hostname;
            var port = (document.location.port) ? ':' + document.location.port : '';

            if (imgUrl.indexOf('/') == 0){ // server root path
              imgUrl = pcol + host + port + imgUrl;
            }
            else{  // app root
              imgUrl = basepath + imgUrl;
            }
          }
        }

Answer 4

IE should have absolutely no problem with relative-pathed images so long as they're relative to a secure root. The problem you're hitting quite likely is caused elsewhere.

http://blogs.msdn.com/ieinternals/archive/2009/06/22/HTTPS-Mixed-Content-in-IE8.aspx