CODEWITHSUNDEEP
javascripthtmlcss
Developer
Developer

Reputation: 4321

How to determine if browser supports https resources

I have faced an issue on older browsers. For example Safari for Windows.

I'm adding a background to a div:

For example:

background-image: url('https://www.desktopbackgroundsi.net/wp-content/uploads/Picture_6.jpg');

The url is not a https, just for example!

Older browsers do not load this image. How can i workaround this to show a default image then.

Upvotes: 2

Views: 102

Answers (3)

MrDeveloper
MrDeveloper

Reputation: 1041

You may be facing this issue with older browsers as they do not load insecure content. The certificate of the server you provide in your example is invalid and thus the browser may not load it (depending on its security settings).

Perhaps try with an example image that is hosted over a legitimately secured connection : https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png

Upvotes: 2

thiagoh
thiagoh

Reputation: 7388

You can check the browser version and add a class dynamically to your element.

For example, to display a different background when CSS3 gradients are not supported, your code would look something like this:

.somediv {
   background: -webkit-gradient(linear, 0% 0%, 0% 100%,
     from(#660C0C), to(#616665), color-stop(.6,#0D0933)); }

.no-cssgradients .somediv {
   background: url('/images/gradient.jpg'); }

If you want to discover which is the user browser's version you can use this function here.

Upvotes: 2

Jeeva J
Jeeva J

Reputation: 3253

You no need to mention the http or https.

Just do like following, it will automatically take the url.

background-image: url('//www.desktopbackgroundsi.net/wp-content/uploads/Picture_6.jpg');

Upvotes: 2

Related Questions