Forcing a CSS background image to be HTTPS

Question

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.

When you are using a relative path, there's nothing to worry. It should be coming in HTTPS. — Praveen Kumar Purushothaman, May 14 '19 at 08:51

DreamTeK · Accepted Answer · 2019-05-14T09:12:43.687

2

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

Then Click MEDIA

Simply serve the unsecure files locally from your secured domain.

edited May 14 '19 at 09:12

answered May 14 '19 at 09:03

DreamTeK

32,537
27
112
171

Maybe add the browser that you are using, because this is different in every browser. – Davy de Vries May 14 '19 at 09:11

Forcing a CSS background image to be HTTPS

1 Answers1

Firefox Example