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.

Answer 1

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>

Parallax in mobile devices

Question

1 answers

solution1
1 2016-10-26 16:09:26

Parallax in mobile devices

Question

1 answers

solution1 1 2016-10-26 16:09:26

solution1
1 2016-10-26 16:09:26