CSS works fine on chrome on desktop and android but does not work on safari - html

Question

So I have a website for which I have the style.css and responsive CSS defined. The CSS works fine on laptop and android's chrome but kinda messes up in safari
The main problem is that the background image in the section, i.e. 1.webp appears perfectly in android and desktop chrome and firefox but fails to do so in safari. Somebody said that since there is no resolution set so that's why the safari is messing up. I would want an expert's opinion. Please help me out
<section class="whatwe" id="register" style="background: url(img/1.webp) no-repeat fixed center center/cover;">
<div class="container">
<div class="row">
<div class="col-lg-10 col-lg-offset-1 text-center">
<div class="wedoContent">
<h2 class="lead color_white">Get Your Tickets</h2>
<!--a href="/form/register.html" id="rzp" class="bes_button" target="_blank">Register Now</a-->
<div id="wrapper">
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="circle c1 img-circle">
<h4 class="grey">Bennett University</h4>
<br>
<!--span class="icon blue"><i class="fa fa-eur"></i></span-->
<span class="price-large">1249</span>
<!--span class="price-small">90</span-->
<!--button type="button" class="btn btn-info">Choose</button-->
</div>
</div>
<!-- .Col-md-3 ends here -->
<div class="col-md-3">
<div class="circle c2 img-circle">
<h4 class="red">Early Bird</h4>
<br>
<!--span class="icon yellow"><i class="fa fa-eur"></i></span-->
<span class="price-large red">999</span>
<!--span class="price-small">90</span-->
<!--a href="form/early_bird.html" id="rzp" class="bes_button"
target="_blank">Register</a-->
<h4 class="red"> Coming Soon</h4>
<!--button type="button" class="btn btn-warning">Choose</button-->
</div>
</div>
<!-- .Col-md-3 ends here -->
<div class="col-md-3">
<div class="circle c3 img-circle">
<h4 class="grey">Gen Pop</h4>
<br>
<!--span class="icon green"><i class="fa fa-eur"></i></span-->
<span class="price-large grey">1499</span>
<br>
<!--button type="button" class="btn btn-success">Choose</button-->
</div>
</div>
<!-- .Col-md-3 ends here -->
<!--div class="col-md-3">
<div class="circle c4 img-circle">
<h4 class="red">Deluxe Plan</h4>
<span class="icon red"><i class="fa fa-eur"></i></span>
<span class="price-large red">8,</span>
<span class="price-small">90</span>
<p>Great for small Business</p>
<button type="button" class="btn btn-danger">Choose</button>
</div>
</div-->
<!-- .Col-md-3 ends here -->
</div>
<!-- .Container ends here -->
</div>
<!-- .Row ends here -->
</div>
<div class="mouseSlider" style="margin-top:200px;">
<img src="img/mouse.png" alt="">
<img src="img/mouseh.png" alt="">
</div>
</div>
</div>
</div>
</div>
</section>
And here is the CSS :
.whatwe{
height: -webkit-fill-available;;
}
.wedoContent{
padding-top: 36vh;
}
.wedoContent h5 {
margin-bottom: 39px;
}
.wedoContent h2{
margin-bottom: 29px;
}
#charset "utf-8";
* {
padding:0;
margin:0;
border:0;
}
body {
background: #d5d5d5;
font-family:trebuchet MS;
color:#6B6B6B;
border: 0 none;
margin: 0;
font-size:13px;
padding: 0;
}
#wrapper{
padding: 60px 0px;
margin-left: 50px;
}
.container{}
.row{}
.circle{
background: #ffffff;
padding: 35px;
text-align: center;
height: 80%;
width: 80%;
border: 8px solid #F2F2F2;
transition: all 0.5s;
-moz-transition: all 0.5s; /* Firefox 4 */
-webkit-transition: all 0.5s; /* Safari and Chrome */
-o-transition: all 0.5s; /* Opera */
}
.circle h4{
margin: 0;
padding: 0;
}
.circle p{}
.circle span{}
.circle span.icon{
}
.circle span.icon i{
font-size: 48px;
}
.circle span.price-large{
font-size: 68px
}
.price-small{
font-size: 24px
}
.c1:hover{
background: #39b3d7;
color: #ffffff;
}
.c1 .blue{
color: #39b3d7;
}
.c1:hover .blue{
color: #ffffff;
}
.c2:hover{
background: #ed9c28;
color: #ffffff;
}
.c2 .yellow{
color: #ed9c28;
}
.c2:hover .yellow{
color: #ffffff;
}
.c3:hover{
background: #47a447;
color: #ffffff;
}
.c3 .green{
color: #47a447;
}
.c3:hover .green{
color: #ffffff;
}
.c4:hover{
background: #d2322d;
color: #ffffff;
}
.c4 .red{
color: #d2322d;
}
.c4:hover .red{
color: #ffffff;
}
.c1 .grey{
color: #696969;
}
.c1:hover .grey{
color: #ffffff;
}
.c2 .grey{
color: #696969;
}
.c2:hover .grey{
color: #696969;
}
.c3 .grey{
color: #696969;
}
.c3:hover .grey{
color: #696969;
}
.c1 .red{
color: #d2322d;
}
.c1:hover .red{
color: #ffffff;
}
.c2 .red{
color: #d2322d;
}
.c2:hover .red{
color: #ffffff;
}
.c3 .red{
color: #d2322d;
}
.c3:hover .red{
color: #ffffff;
}
.c2:hover{
background: #d2322d;
color: #ffffff;
}
.c1:hover{
background: #696969;
color: #ffffff;
}
.c3:hover{
background: #696969;
color: #ffffff;
}
.c3:hover .grey{
color: #ffffff;
}

Answer 1

.webp format is not supported in Safari Browser, You should load different format for safari using CSS Feature Query: