Html 如何让背景图像CSS在Safari和Internet Explorer上工作？

我为一对即将结婚的夫妇创建了一个简单的网站，我使用了bootstrap，一切都很好。然而，2倍的图像（.webp）并没有加载到Internet Explorer或Safari上，它在Chrome上运行得非常好

CCS如下：

#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格式如下：

<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>

胡安妮塔和马库斯
你要结婚了吗


我们将在……结婚

通过改变CSS选项的顺序，我尝试了在各种表单上找到的一些方法，但并没有成功

它必须是与背景CSS相关的东西，因为JPEG加载得很好

---

网站链接：

主要问题是图像的扩展，在safari和IE中不支持webp。
请看这里：
尝试其他图像扩展，如jpg或png等