Tagged: 

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 23, 2023 at 6:30 pm #1399052
    JannyPolak

    Hi
    I uploaded a background image in General Styling (in the Child theme) for the Main content
    Set this to: center/center; fixed; no repetition

    The picture is continuously visible on large screens (while scrolling on the page)
    But on mobile and iPad the background impage is only visible once somewhere halfway the page.

    Please see example on this page: https://gruttefiif.nl/wat-is-er-te-doen-bij-de-safarilodge-glampingtent-in-grou-en-omgeving-friesland/

    You see the image with elephants during scrolling on large screens
    But on an ipad or mobile phone, you will see the backgrounimage of the elephants only somewhere in the middle of the complete page. So not fixed on every view

    How to solve this?

    Thanks in advance

    February 24, 2023 at 7:51 am #1399089
    Ismael

    Hey JannyPolak,

    Thank you for the inquiry.

    Fixed backgrounds are not supported on most iOS devices. You may need to set the Background Attachment to Scroll in order to correctly display the background. You can also try this css code.

    @media only screen and (max-width: 1024px) {
  /* Add your Mobile Styles here */
  .avia_mobile .avia-full-stretch {
      background-attachment: scroll !important;
  }

  .avia-bg-style-fixed {
      background-attachment: scroll !important;
  }
}

    Best regards,
    Ismael

    February 27, 2023 at 10:17 am #1399391
    JannyPolak

    HI
    Tried this but it is not changing on ios devices. Same issue

    Note: and set to scroll makes the picture not looking good on large screens, so I set to fixed again as well

    Would love to have the option (in future) to exclude background images for mobilie/tablet in the general styling or to see the improvement so it will work in future

    March 1, 2023 at 9:21 am #1399631
    Ismael

    Hi,

    Thank you for the update.

    Did you ppurge the cache before checking the page? Please try to temporarily disable the Enfold > Performance > File Compression settings, then check the page again on incognito mode.

    If you want to hide the background completely, please use this css code.

    @media only screen and (max-width: 1024px) {
  /* Add your Mobile Styles here */
  .avia_mobile .avia-full-stretch {
      background: none !important;
  }

  .avia-bg-style-fixed {
      background: none !important;
  }
}

    Best regards,
    Ismael

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.