safari not displaying header background images - html

Question

In my website the top header background and the "Kreation Team" Div background are not displaying in safari on ipads and iphones but it is visible on imacs and macbooks. I mean in small devices the background images are not visible.
If you go in Chrome and safari separately you can see the difference...
Please help how to solve this?`
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>Home</li>
<li>About Us</li>
<li>Branches</li>
<li>Gallery</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 an error in console too
Uncaught Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher, but lower than version 3

Answer 1

Your console error is due to the fact that you are not loading jQuery in your HTML. You need to add something along the lines of:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
This may also be what's causing problems with your images. If you're still experiencing issues, it helps to have a working example. Try creating a CodePen or JSFiddle with your code, and append the link to your original post.
Edit: I just took a look at your code, and the image isn't loading on Safari mobile because of background-attachment: fixed on line 214 of stylesheet.css for the CSS class .jumbotron. If you remove that from your code, the image works fine. If you need to keep the CSS for the desktop, just use a simple media query to target mobile devices.