1 mixed content left after SSL-Upgrade: 1 Image. But can't fix it!

There's an issue after installing an SSL Certificate: No green padlock! Google Inspector says, there is mixed content. I found out that an image (used as Background for Navigation, added via CSS) is the Problem. But... I fixed it with overwriting (https:...), nothing. I deleted the file on http:.., nothing. It still shows up on the Site and prevents the green padlock... Checked caching etc. Nothing. Any ideas how to get rid of it? Website: https://holtergmbh.de

  • Nahid

    Hey Chris !
    Hope you are having a great day!

    I'm sorry about the inconvenience you are encountering. I checked your site and found that the <header> tag with the ID #main-header is still using the 'Holter-Navistripe.jpg' image with HTTP protocol as the background image in CSS. Here's a screenshot from the browser developer tools as a reference:

    To be sure what is causing this, I'll need to take a look inside Divi settings. Would you mind enabling the Support Access so that I can access your site and diagnose the issue? You can do so by following this handy guide.

    I'll be looking forward to hearing back from you. Thanks!

    Best,
    Nahid

  • Dimitris

    Hello there Chris,

    hope you're doing good today! :slight_smile:

    I've tried to remove the protocol from this CSS rule considering theme header, in Divi's theme options, under the Custom CSS area, so we could have a protocol-relative URL structure (more info on this can be found here: https://www.paulirish.com/2010/the-protocol-relative-url/).

    Doing so, didn't resolve the issue though. This could also be a matter of caching, but I also tried to add this rule in the style.css file of your child theme, using the built-in editor as can be found in Appearance -> Editor in wp-admin area.

    body.custom-background {
      background-image: url(//YOURDOMAIN.de/wp-content/uploads/2017/02/Holter-Background_V3.jpg) !important;
    }
    #main-header::after {
     background-image: url('//YOURDOMAIN.de/wp-content/uploads/2017/09/Holter-Navistripe.jpg') !important;
    }

    This did the trick and opening your website in a incognito Chrome window now, gets me the "secure" icon.

    Another workaround about the background image of header, could be the use of CSS3 gradients instead of a background image. :wink:

    /* CSS3 gradients - generated here: */
    /* https://www.cssmatic.com/gradient-generator#'\-moz\-linear\-gradient\%28left\%2C\%20rgba\%28255\%2C255\%2C255\%2C1\%29\%200\%25\%2C\%20rgba\%280\%2C1\%2C137\%2C1\%29\%20100\%25\%29\%3B' */
    #main-header::after {
      background: rgba(255,255,255,1);
      background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(0,1,137,1) 100%);
      background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(0,1,137,1)));
      background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(0,1,137,1) 100%);
      background: -o-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(0,1,137,1) 100%);
      background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(0,1,137,1) 100%);
      background: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(0,1,137,1) 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#000189', GradientType=1 );
    }

    Warm regards,
    Dimitris

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.