Background Image on mobile not fitting the screen correctly

Question

I'm having problem with my website, bear with me the page is in French but fortunately the code is the same with all languages. I'm using a Samsung Galaxy S5 to view the page and there is a big black box on top.

You can view the original page here. You can see on your desktop it's all good. Now that's what happens on my Galaxy S5 (sorry for the big image don't know how to size it down on Stack Overflow)

On any browser from a computer or iPhone/iPad it's okay, but on my Galaxy S5, the background image is shown at the bottom and there is a black bar on top.

Now the code I currently have that works okay on desktop/iPad/iPhones is

 body{
    margin:0; 
    padding:0; 
    font-size:13px; 
    font-family:"Arial Black", Gadget, sans-serif; 
    color:#FFFFFF;
    background-image: url('http://www.impotsuzannedelorme.com/images/cloud.jpg'); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover; 
}

I'm not sure what I'm missing, if a css guru can help me out, I would appreciate a lot.

Answer 1

background-attachment:fixed is not yet supported on mobile chrome (Version 47), and is probably interfering with background-size:cover (that IS properly supported); check out http://caniuse.com/#feat=background-attachment .

Also, under some IOS Safari versions, the combination of these two things (size cover + attch. fixed) is known to cause artifacts (see http://caniuse.com/#search=background-size , tab known issues). Probably it won't even work in iPad 2 and for sure it won't work on iPad 1.

This said, You have several options in order to have a fixed background and scrolling content:

• Use a div for the background and a scrolling div for the content like this: https://jsfiddle.net/6r3pobys/2/

• Use the image in the body with background-size:cover just like you have it at the moment, remove background-attachment:fixed and use the scrolling div approach from the previous point: https://jsfiddle.net/s22qsg55/2/ . Mind that in this case you need to set height:100% to the HTML element as well!

You can see your webpage with latest approach here: https://jsfiddle.net/t9kpgjqr/2/ . I created the div supercontainer that contains your body fragments and the footer.