parallax on mobile

[Historical Forums User]

I’m having trouble trying to figure out how to style parallax backgrounds on mobile. It looks find when I resize my browser or view in responsinator, but on an actual phone the background it zoomed way in.

here is the site:
http://remingtonjamesfitness.com/personalized-meal-plan.html

Here is the link in responsinator:
http://www.responsinator.com/?url=http%3A%2F%2Fremingtonjamesfitness.com%2Fpersonalized-meal-plan.html

i tried this solution, which makes the background less blurry, but it’s still zoomed way in

section.module.parallax {
  height: auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
@media screen and (max-width: 479px){

section.module.parallax-1, section.module.parallax-2, section.module.parallax-3, section.module.parallax-4{
    -moz-background-size: auto;
    -webkit-background-size: auto;
    background-attachment: scroll;
    background-position: top;
    background-size: auto;
   }
}

[rkieru]

I’ve run into the exact same issue in the past, and the only cross-device solution I found to work well enough to be deployed live was (sadly) to serve downsized images based on media queries.

Essentially I had to create Full Size, Half Size, and Quarter Sizes for all the Parallax backgrounds, and then depending on the device screen width serve the most appropriate solution.

[Historical Forums User]

I still can’t figure this out. I tried serving a 480px. x 960px portrait image using media queries. Nothing seems to work. Here is the css. For a control I used the same image for all 4 parallaxes.

here’re the media queries

 /* Portrait phones and smaller */
@media (max-width: 480px) {

  .parallax-1 {
    background-image: url("assets/img/bg/2-small.jpg") !important;
    height: 815px !important;
  }

  .parallax-2 {
    background-image: url("assets/img/bg/2-small.jpg") !important;
    height: auto !important;

  }

  .parallax-3 {
    background-image: url("assets/img/bg/2-small.jpg") !important;
    -moz-background-size: auto;
    -webkit-background-size: auto;
    background-attachment: scroll;
    background-position: top;
    background-size: auto;
    height: auto !important;
  }

  .parallax-4 {
    background-image: url("assets/img/bg/2-small.jpg") !important;
    background-image: url("assets/img/bg/2-small.jpg") !important;
    -moz-background-size: auto;
    -webkit-background-size: auto;
    background-attachment: scroll;
    background-position: top;
    background-size: auto;
    height: 815px !important;
  }


} /* end @media (max-width: 480px) */

here is the link:
http://remingtonjamesfitness.com/personalized-training-program.html

[rkieru]

Like I said… it’s a nightmare on Mobile. Worse yet is trying to test it in faux-mobile settings like “Responsive Design View”. Safari, for example, is notorious for ignoring media queries even in RDV.

The solution I ended up having to use on this site was so inelegant that if I have any say in the matter, I’ll probably avoid Parallax in the future. With all the various device types I ended up with 8 separate media queries to serve the properly-sized background to the correct device.

Here are the ones I ended up settling with to provided the Full / Half / Quarter options as needed based on device size and orientation.

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {}
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {}
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {}
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {}

[Author]

Posts