On my website, the top header background and the background of the "Kreation Team" Div are not appearing on Safari for iPads and iPhones, but they are visible on iMacs and MacBooks. The background images do not show up on smaller devices.
If you compare Chrome and Safari separately, you can see the difference... Please assist me in resolving this issue?
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="jumbotron">
<div class="container-fluid">
<nav class="row pull-right hidden-xs" style="padding:20px 20px 0 0;">
<ul style="font-size: 15px;">
<li><a href="http://kreationhandlooms.com" alt="Kreation House of Cotton home page">Home</a></li>
<li><a href="http://kreationhandlooms.com/aboutus" alt="Kreation House of Cotton about us page">About Us</a></li>
<li><a href="http://kreationhandlooms.com/branches" alt="Kreation House of Cotton contact us page">Branches</a></li>
<li><a href="http://kreationhandlooms.com/gallery" alt="Kreation House of Cotton gallery page">Gallery</a></li>
</ul>
</nav>
<div class="row-fluid">
<div class="col-sm-7 col-xs-7">
<h1>KREATION <br>House of Cotton</h1>
<h2 style="font-weight: bold;padding-bottom: 30px;">Srilankan Quality Handloom Manufacturer</h2>
<button class="jumbo-btn hidden-xs" onclick="
location.href='http://kreationhandlooms.com/aboutus';" alt="Kreation House of Cotton about us page">About Us</button>
</div>
<div class="col-sm-5 col-xs-5">
</div>
</div>
</div>
</div>
CSS
.jumbotron{
background-image: url("images/silk saree.jpg");
background-size: cover;
background-position: center 10%;
background-repeat: no-repeat;
background-attachment: fixed;
height: 720px;
width: 100%;
font-family: nexabold;
margin: 0;
padding: 0;
}
@media only screen and (min-width: 510px) and (max-width: 2000px){
.jumbotron .container-fluid .row-fluid{
padding:160px 0 0 10px;
}
}
@media only screen and (min-width: 100px) and (max-width: 510px){
.jumbotron .container-fluid .row-fluid{
padding-top: 80px;
}
}
.jumbo-btn{
padding:10px 20px;
border: 3px solid white;
border-radius: 5px;
font-size: 18px;
background:transparent;
transition: all 0.4s;
}
.jumbotron h1{
font-weight: bold;
}
.jumbo-btn:hover{
background-color: grey;
color: white;
border:3px solid white;
}
@media only screen and (min-width: 200px) and (max-width: 760px){
.jumbotron .row-fluid h1{
margin:0 0 30px 0;
font-size: 45px;
font-weight: bold;
}
There was also an error in the console
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3