Parallax in mobile devices

Question

I'm building a website where I'm using parallax backgrounds. It's working just fine in Safari and Chrome on my Mac, but the background-size: cover isn't working at all on mobile devices. The pictures are zoomed in, and the parallax function is disabled.

I've been searching after a simple solution but can't find it anywhere. I'd be happy to lose the parallax function on mobile devices as long as the background pictures has proper dimensions.

Help? Attaching the basic code.

HTML:

<body>

<div id="bg01" class="bg01">
</div>

<div class="divwrapper">
<div class="div" id="div">
CONTENT
</div>
</div>

<div id="bg02" class="bg02">
</div>

</body>

CSS:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
    background-color: red;
}

.divwrapper {
    display: table;
    width: 80%;
    margin:auto; 
    font-size: 12px;
    line-height: 150%;
    text-align: center;
}

.div {
    height:300px;   
}

.bg01 { 
    background-image: url("https://s-media-cache-ak0.pinimg.com/originals/52/cc/af/52ccaf818ddc056e12e522b9395dd87d.jpg");
    height: 100%; 
    width: 100%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

.bg02 { 
    background-image: url("http://blog.hostbaby.com/backgrounds/bg_lightwoodfloor.jpg");
    height: 100%; 
    width: 100%;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

Here is the JSFiddle

EDIT/UPDATE

I've tried with different media queries to at least get the right scale on the div background images by changing them to smaller images, but this doesn't work at all (it still uses the big one, zoomed in):

@media (max-width: 600px) {
        .bg01 { 
    background-image: url("../images/bg_small.jpg");
    background-size: 20% 20%;
    background-repeat: repeat;
    }
  }

I've tried with both min-width and max-width as well.

There's nothing parallax about your code. Parallax usually involves JavaScript to handle the offset movement of the backgrounds. — j08691, Oct 26 '16 at 15:59
@j08691 actually no, Parallax can be done entirely with 3D CSS using the built in GPU of the browser device, as mobiles dont usually have GPUs this means that Parallax viewing is poor on mobiles, at best. [reference](http://keithclark.co.uk/articles/pure-css-parallax-websites/) — Martin, Oct 27 '16 at 10:28
Well, it's kind of parallax at least, right? That type of function. But I could do with having the divs under each other if that's doable in an easy way for mobile devices. It looks good on desktop. — soulitude, Oct 27 '16 at 18:17

felix91 · Answer 1 · 2016-10-27T10:22:52.357

I usually use the "cover checklist" presented here: https://css-tricks.com/perfect-full-page-background-image/ But not a great usage if you need to see the whole image

Try Keith Clark's solution: I tried it with mobile tool it worked fine. Just replace backgrounds with images. http://keithclark.co.uk/articles/pure-css-parallax-websites/

HTML

<div class="parallax">

<div id="group1" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group2" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--back">
    <div class="title">Background Layer</div>
  </div>
</div>

<div id="group3" class="parallax__group">
  <div class="parallax__layer parallax__layer--fore">
    <div class="title">Foreground Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group4" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--back">
    <div class="title">Background Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--deep">
    <div class="title">Deep Background Layer</div>
  </div>
</div>

<div id="group5" class="parallax__group">
  <div class="parallax__layer parallax__layer--fore">
    <div class="title">Foreground Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group6" class="parallax__group">
  <div class="parallax__layer parallax__layer--back">
    <div class="title">Background Layer</div>
  </div>
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

<div id="group7" class="parallax__group">
  <div class="parallax__layer parallax__layer--base">
    <div class="title">Base Layer</div>
  </div>
</div>

For some reason I was hoping to do it only via css, but maybe I should start over with this js solution then. — soulitude, Oct 27 '16 at 09:52
Keith Clark makes some amazing stuff. and @soulitude Keith Clarks solution is only CSS, no Javascript, but you should be aware that for it to work well a device should have a GPU. — Martin, Oct 27 '16 at 10:30
It's a good solution, but I really can't get the photos to zoom out properly anyway. I'd be just fine with a more static version on mobile devices - losing the parallax thing - as long as the photos are full width. — soulitude, Oct 27 '16 at 18:16

Parallax in mobile devices

1 Answers1