Search code examples
cssmobilesassbackground-imagetablet

background image won't show on tablet and mobile phone

The background image shows perfectly on PC and simulator (tablet and phone), but it won't show on actual phone/tablet.

code

div#photo_break {
  @include viewport-unit(height, 28vw);
  background-image: url('<img>');
  background-repeat: no-repeat;
  background-size: 100% auto;
  -webkit-background-size: 100% auto;
  -moz-background-size: 100% auto;
  -o-background-size: 100% auto;
  background-position: center top;
  background-attachment: fixed;
  z-index: 99999;
}

website

As you can see in this picture, in Chromes simulatorthe picture is shown.

picture showing that in the Chrome simulator it works!

The size of the image is not really large, or is it?

enter image description here

Solution

  • mobileand tablet browsersdo not support background-attachment: fixed.

    changing this, solved the problem