How to get background Image CSS to work on Safari and Internet Explorer?

Question

I have created a simple website for a couple who are getting married, I've used bootstrap and everything is working well. However 2x of the images (.webp) are not loading on Internet Explorer or Safari, it is working perfectly on Chrome.

CCS below :

#home {
background: url(/Images/background_two.webp) center center no-repeat;
display: table;
height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

#fixed {
background: url(/Images/background_four.webp) center center no-repeat;
display: table;
height: 70%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

HTML Below :

<div id="home">
    <div class="landing-text">
        <h1>Juanita & Markus</h1>
        <h3>ARE GETTING MARRIED</h3>
        <a href="#our_story_one" class="btn btn-light btn-lg">Our Story</a>
    </div>      
</div>


<!-- Fixed Image -->

<div id="fixed">
    <br>
    <div class="container count-down">
        <div class="jumbotron container">
           <h1><b>We are getting married in...<b></h1><br>
           <h3 id="demo"></h3>
        </div>
    </div>
</div>

I have tried a few methods found on various forms by changing order of the CSS options but with no luck.

It must be something related to the background CSS as the Jpegs load perfectly.

Website link : https://skrikkeljaartroue.co.za/

Answer 1

The main problem is the extension of the images, webp is not suported in safari and IE.
See here: caniuse.com/#feat=webp
Try another image extensions such as jpg or png, etc.