Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • December 16, 2020 at 4:51 pm #1267879
    Puntvorming

    On my iPad my website looks terrible because of the unrecognised pictures. This happens on iOS devices such as an iPad because they do not support fixed backgrounds. To fix the issue, we have to set the value of the background-attachment property back to default, which is scroll.

    @media only screen and (max-width: 989px) {
    .avia-full-stretch{
    background-attachment: scroll !important;
    }
    }

    In order to solve problem I put above mentioned code in Enfold > General Styling > Quick Css. Did not work. Then I got the option to put into themes/enfold/css/custom.css. Did not know where to find this and got the answer: ‘If CSS file merging and compression is enabled in Enfold theme options > Performance tab, please firstly disable it and save theme options and refresh your page a few times. If that too does not help, please register to our support forum using your purchase code’. So I did try this and here I am! Please help!

    December 20, 2020 at 5:46 pm #1268805
    Mike

    Hey Puntvorming,
    Sorry for the very late reply and thanks for the login, I adjusted your css to this:

    @media only screen and (max-width: 989px) {
.responsive #top .avia-full-stretch{
background-attachment: scroll !important;
}
}

    This seems to be working, but I’m checking on Windows, please clear your cache and check with your iPad.
    To target only Safari you could try this:

    @media only screen and (max-width: 989px) {
.avia-safari #top .avia-full-stretch{
background-attachment: scroll !important;
}
}

    Best regards,
    Mike

    December 21, 2020 at 12:19 pm #1268993
    Puntvorming

    Hi Mike,

    Thank you for above solutions. I tried them both, cleared cache (even turned off the iPad) but the pictures stay the same with both solutions unfortunately; unrecognisable.
    Do you please have another solution?

    Kind regards,
    Anne

    December 22, 2020 at 1:54 pm #1269314
    Mike

    Hi,
    Thank you for the feedback, I was able to test your page on a Mac with Safari v14.0.0.1 in developer mode as an iPad, I realize that the width in the css above is incorrect so I changed to 1024px, now the css is working, please check.

    @media only screen and (max-width: 1024px) {
.avia-safari #top .avia-full-stretch{
background-attachment: scroll !important;
}
}

    Best regards,
    Mike

    December 22, 2020 at 9:25 pm #1269394
    Puntvorming

    Thanks Mike, you are the BEST!
    Problem is solved and I’m so glad. Thank you so much.

    Merry Christmas en a Happy New Year!

    December 23, 2020 at 12:58 am #1269412
    Guenni007

    or you use a css hack to have fixed images by replacing the attachment-position:scroll with a container in fixed positioning.

    Read the whole post from the beginning but use this last optimized version of the css hack
    https://kriesi.at/support/topic/colour-section-background-image-mobile-responsive-issue/#post-1262283

    btw: this will work in IOS mobile too !
    https://webers-testseite.de/donkey/

    December 23, 2020 at 3:10 pm #1269547
    Mike

    Hi,

    @Puntvorming     glad we were able to help, we will close this now. Thank you for using Enfold and Merry Christmas and a Happy New Year 🎄

    @Guenni007     thank you for this solution, much nicer 👍 Merry Christmas and a Happy New Year 🎄

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘iOS do not support fixed backgrounds’ is closed to new replies.