CODEWITHSUNDEEP
htmlcssparallax
soulitude
soulitude

Reputation: 121

Parallax in mobile devices

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.

Upvotes: 1

Views: 12223

Answers (1)

felix91
felix91

Reputation: 462

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>

Upvotes: 2

Related Questions