Search code examples
htmlcsshttpsbackground-imagemixed-content

Forcing a CSS background image to be HTTPS

I am looking to secure my website with HTTPS however I am receiving a mixed-content error as my background images from my CSS file are loading as 'http'.

I am aware if you can somehow change 'http' to 'https' then it will solve the error - However im unaware on how to do this as I am not using Wordpress.

.image-1 {

  background-image: url(../images/image1.jpg);
}

.image-2 {

  background-image: url(../images/image2.jpg);
}

How can I solve this issue? Is there any way to force images to load as HTTPS?

Thanks.

Solution

  • The images in your example are being loaded relatively, hence they will be served as https as long as the resolving domain you are accessing the site from is already using TLS.

    If you are getting mixed content message you are probably serving an image or icon from another source in addition to your default web site.

    You can view the culprits from your browser easily:

    Firefox Example

    CLICK MORE INFORMATION

    enter image description here

    Then Click MEDIA

    enter image description here

    Simply serve the unsecure files locally from your secured domain.