Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • April 26, 2024 at 8:37 am #1440917
    webmonnik

    Hallo,

    I’m experiencing an issue with the background image in the footer of a webpage that appears fine on desktop and Android devices but is blurry and appears to be repeating on iPhones. The CSS for the background image is set to background-size: cover; which stretches the image nicely across devices except on iPhones where it does not render properly.

    Any advice on how to ensure the background image remains sharp and does not repeat on all types of devices, especially iPhones, would be greatly appreciated.

    Thank you!

    Best regards, Rogier

    April 26, 2024 at 3:39 pm #1440975
    Rikard

    Hi Rogier,

    Which browser and version of Iphone are you using to get those results?

    Best regards,
    Rikard

    April 28, 2024 at 11:05 am #1441145
    webmonnik

    Hi Rikkert.
    It is an iPhone 14 and the Safari browser.
    Best regards, Rogier

    April 29, 2024 at 7:04 am #1441244
    Ismael

    Hi,

    Thank you for the info.

    Try to add this css code to adjust the background attachment property:

    @media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  .footer_color {
    background-attachment: scroll;
  }
}

    Please make sure to purge the cache before checking the page. Let us know of the result.

    Best regards,
    Ismael

    April 29, 2024 at 2:57 pm #1441308
    webmonnik

    Thanks Ismael.this works perfect.

    Best regards, Rogier

    April 29, 2024 at 7:29 pm #1441338
    Rikard

    Hi,

    Great, I’m glad that Ismael could help you out. Please let us know if you should need any further help on the topic, or if we can close it.

    Best regards,
    Rikard

    April 29, 2024 at 7:30 pm #1441339
    webmonnik

    You can clote the topic. Thank you guys for your help!

    Best regards, Rogier

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)
  • The topic ‘Footer background image blurry on iOS devices’ is closed to new replies.