1

Website background image display on all other device like laptop and android phone. But not at ios mobile only.I even resize image at 768 px * 365 px but not working.

.bg-img {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.bg-img .overlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    opacity: .8;
    background: #1C1D21;
}
<!-- Background Image -->
  <!-- large device only -->
  <div class="visible-xl visible-lg visible-md hidden-sm hidden-xs">
   <div class="bg-img" style="background-image: url('./img/team/background-clouds-dark-957002.jpg');">
   <div class="overlay"></div>
   </div>
  </div>
  <!-- mobile only -->
  <div class="visible-xs visible-sm hidden-md hidden-lg hidden-xl">
   <div class="bg-img" style="background-image: url('./img/team/Smallsize.jpg');">
    <div class="overlay"></div>
   </div>
  </div>
  <!-- /Background Image -->
Roshan Khapung
  • 19
  • 1
  • 6
  • 1
    Possible duplicate of [Background image not showing on iPad and iPhone](https://stackoverflow.com/questions/18999660/background-image-not-showing-on-ipad-and-iphone) – Mohit Gupta Feb 20 '19 at 09:45

1 Answers1

0

the css depend on the browser not the os please install chrome for testing. or use css for separate browser

 #urID{
        background:url("../images/bg.jpg") no-repeat scroll right top #000000;
        -o-background-size: cover;
        -moz-background-size: cover;
        -webkit-background-size:cover;
        background-size: cover;
    }
kealaxshan
  • 338
  • 2
  • 14
  • I tested all device by inspect on chrome but on a real ios mobile or iphone its not working. – Roshan Khapung Feb 21 '19 at 04:28
  • ipone5 &5s is 320 width please try Media query – kealaxshan Feb 21 '19 at 04:37
  • thank for your answer. but i solve it as on IOS safari browser its not working as a height of my background div section is on vh so i change it. where my css is #head{ height:100vh;} so i deleted it and change it to #head{ min-height: 630px;} now its work – Roshan Khapung Feb 21 '19 at 05:56