[Support request] Background showing blown up in iphone

Home Forums Support [Support request] Background showing blown up in iphone

Home Forums Support Background showing blown up in iphone

  • This topic has 1 reply, 2 voices, and was last updated 2 months ago by David.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #2247234
    Kevin

    I have full page background with following css

    body {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.6) 100%, rgba(0,0,0,0.6) 0%), url(“bg.jpg”);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    }

    It’s showing fine on desktop, android on all browsers but it’s not showing properly on iphones (any type of browser)
    I have uploaded example of what it looks like on iphone vs android

    #2247410
    David
    Staff
    Customer Support

    Hi there,

    the background-attachment: fixed; property is not supported on mobile browsers and on iOS there is a bug that results in the image being scaled up.

    Remove that property and create a separate CSS rule that only applies to non-touch devices like so:

    @media(pointer: fine){
        body {
            background-attachment: fixed;
        }
    }
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.