Search code examples
cssgoogle-chromefirefoxstylish

CSS/Stylish gives HTTP/HTTPS error in background: url()?

I got this error:

The page at 'https://www.google.com/' was loaded over HTTPS, but requested an insecure image 'http://i.imgur.com/#####.png'. This content should also be served over HTTPS.

How can I fix this?
My Stylish code:

#hplogo {
    /* these numbers match the new image's dimensions */
    padding-left: 125px !important;
    padding-top: 25px !important;
    background: url(http://i.imgur.com/cr5pCeF.png) no-repeat !important;
}
Solution

  • The browser won't complain if you request a "secure" (https) image from an an unsecured (http) page1.

    So just use background: url(https://i.imgur.com/cr5pCeF.png) no-repeat !important;

    1 In your case, Google auto-redirects from http to https anyway, so there won't be a mismatch.

    Additionally, for Stylish on Chrome, you can use the auto-protocol form of the URL. That is:

    background: url(//i.imgur.com/cr5pCeF.png) no-repeat !important;

    But, unfortunately, this is not yet supported in Firefox. So don't use that in cross-browser Stylish scripts.