0

I'm having a problem with my website on android mobile devices. When I scroll on my website, the position of the background image is clunky and sometimes when I scroll the background even doesn't position correctly, doesn't show. This error is more evident when I'm using my device in landscape

The site is this: http://qubik-design.co.nf/index.php/category/catalogo/

Visit it on a mobile device and scroll down and you should see the image jump.

I've watched this post Background image jumps when address bar hides iOS/Android/Mobile Chrome and I did several things that it has been said there but didn't work. I was trying for a few days and nothing.

Could you guys shed some light? The code that I'm using for the background

body.custom-background {
    background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/08/intro-bg1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: left top;
    background-attachment: fixed;
}

body {
    background: #111 none repeat scroll 0% 0%;
    height: 100%;
    width: 100%;
}

Where is the image

<ul id="supersized" class="quality" style="visibility: visible;">
     <li class="slide-0 activeslide">
        <a target="_blank">
            <img src="http://qubik-design.co.nf/wp-content/uploads/2015/08/intro-bg1.jpg" style="width: 1903px; left: 0px; top: 295.5px;">
        </a>
     </li>
</ul>

The css 

#supersized {  display:none; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }   /*Speed*/
#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
#supersized a { width:100%; height:100%; display:block; }
#supersized li.activeslide { z-index:-10; }
#supersized li.activeslide img{ display:inline; max-width:none; }
Community
  • 1
  • 1
Rubén
  • 123
  • 1
  • 11
  • 1
    This is [related to your question](http://stackoverflow.com/q/24944925/742030) And the answer [is here](http://stackoverflow.com/a/36460620/742030). –  Apr 06 '16 at 19:36

1 Answers1

1

Try setting the background-size to cover instead of 100% 100%:

body.custom-background {
    background-image: url("http://qubik-design.co.nf/wp-content/uploads/2015/08/intro-bg1.jpg");
    background-repeat: no-repeat;
    background-position: left top;
    background-attachment: fixed;
    background-size: cover;
}
taxicala
  • 21,408
  • 7
  • 37
  • 66
  • I've tried it right now and it's the same. I don't know why this happens but it's really ugly. On iphone mobile works correctly. – Rubén Sep 11 '15 at 21:42