Reply To: parallax on mobile

[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