1

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.

Cheese
  • 3,865
  • 5
  • 29
  • 58

3 Answers3

1

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');
Jeeva J
  • 2,839
  • 8
  • 33
  • 72
1

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.

Community
  • 1
  • 1
thiagoh
  • 6,285
  • 8
  • 44
  • 74
1

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

MrDeveloper
  • 969
  • 11
  • 29
  • I'm getting a warning : www.desktopbackgroundsi.net uses an invalid security certificate. The certificate is only valid for the following names: *.hostgator.com, hostgator.com (Error code: ssl_error_bad_cert_domain) – MrDeveloper Dec 09 '15 at 13:13