issue with cut off on background image set on body - iOS/Safari

Question

I've implemented a background image on the <body> element of the following website: http://www.bestdiscointown.co.uk/dev/ - this is so that an image is displayed while the user is scrolling to the bottom of the page (the following screenshot shows this working in Firefox):

This is achieved with the following CSS and holds up well in the majority of web browsers:

body {
    color: #fff;
    font-family: 'proxima_nova_ththin';
    background-image:  url("custom-assets/img/body_bg.jpg");  
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

However when viewed in Safari on iOS 9.3.5 the following issue occurs and the background image cuts off:

Is there a reason for this issue occurring, could it be that I have set background-attachment: fixed;?
Can a fix be applied in my CSS to resolve this?

score 2 · Accepted Answer · edited May 23 '17 at 12:01

2

iOS is known to not keep backgrounds fixed (via background-attachment: fixed) due to supposed performance issues. You can read more here: https://stackoverflow.com/a/23420490/1887218

You can do a workaround, and add the background to a full-screen wrapper, that has position: fixed set. See here: https://stackoverflow.com/a/12770538/1887218

edited May 23 '17 at 12:01

Community

1
1

answered Sep 09 '16 at 18:26

Garconis

773
11
31

score 0 · Answer 2 · answered Sep 09 '16 at 18:09

I think you are missing background-size: cover; or you have to repeat your background

body {
    color: #fff;
    font-family: 'proxima_nova_ththin';
    background-image:  url("custom-assets/img/body_bg.jpg");  
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

issue with cut off on background image set on body - iOS/Safari

2 Answers2