Sridhar Katakam

Genesis and WordPress Tutorials

How to fix Home Sections’ Background Image Problem on iPad Pro in Parallax Pro

by 4 Comments

Parallax Pro‘s (tested in v1.3.3) parallax sections on the homepage have a cover background image for Home Sections 1, 3 and 5.

These background images appear blown up or zoomed in on iPad Pro in Landscape orientation due to background-attachment: fixed in the CSS.

To fix this problem, add the following below the existing media queries in Parallax Pro’s style.css:

/* iPad Pro Landscape */
@media only screen 
  and (min-width: 1024px) 
  and (max-height: 1366px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

    .home-section-1, .home-section-3, .home-section-5 {
        background-attachment: scroll;
    }

}

Before:

After:

References:

https://stackoverflow.com/questions/48954156/div-background-image-scaling-on-ipad-pro-landscape

https://stackoverflow.com/a/43145506/778809

  • Front page background images appear very zoomed on any mobil device in Altitude Pro. How do I correct this? They were in focus, but now are not with these changes –

    .front-page-2,
    .front-page-3,
    .front-page-4,
    .front-page-5,
    .front-page-6,
    .front-page-7 {
    /border-top: 54px solid transparent;
    margin-top: -54px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    position: relative;    /
    z-index: 9;
    }

    .front-page-1,
    .front-page-2, /* Added /
    .front-page-3,
    .front-page-4, /     Added /
    .front-page-5,
    .front-page-6, /     Added */
    .front-page-7
    {
    background-attachment: fixed;
    background-color: #fff;
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-size: cover;
    }

    .front-page-1 {
    position: relative;
    }

    .front-page-1 .image-section {
    padding-top: 75px;
    }

    .secondary-nav .front-page-1 .image-section {
    padding-top: 150px;
    }

    .front-page-4 .image-section {
    padding-top: 75px
    }

    .bottom-image {
    /margin-bottom: -120px;/
    margin-top: 100px;
    }

    .bottom-image img {
    /margin-bottom: -10px;/
    vertical-align: top;

    /*.front-page-1,
    .front-page-2,
    .front-page-3,
    .front-page-4,
    .front-page-5,
    .front-page-6,
    .front-page-7 {
    background-attachment: scroll;
    }*/

    }

    Please help.

    Reply

  • I have a slide show project that employs the Ken Burns effect. They work fine on my computers but will not employ the effect on my Ipads. Can anyone explain to me what’s going on….(more to the point why it’s NOT going on)?

    Reply
    • >