Background image displayed multiple times on mobile device

Question

When I use the chrome responsive tools on my computer the background image of my website is displayed only one time : the browser is just zooming on the image, top of the page correspond to the top of the image etc.. However when I go on my mobile device, the background image is displayed in his integrality so if the page is long, the background image will be displayed multiple times.

This is how it works in my CSS stylesheet :

html, body {
    height: 100%;
    background: url(img/bg.jpg) no-repeat center fixed;
    -webkit-background-size: cover;
    background-size: cover;
}

Try it like this `body {` `height: 100%;` `background: url(img/bg.jpg);` `background-size: cover;` `background-repeat: no-repeat;` `}' — I_Al-thamary, Jan 13 '19 at 15:58
Another way `background: url(img/bg.jpg) scroll no-repeat center/cover;` — I_Al-thamary, Jan 13 '19 at 16:01

score 2 · Accepted Answer · answered Jan 13 '19 at 16:38

2

html, body {  
  background-image: url(img/bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center; 
  -webkit-background-size: cover;
  background-size: cover;
}

answered Jan 13 '19 at 16:38

konnection

433
4
13

Thanks it works, the 'height: 100%' was the problem. – Diamonds Jan 13 '19 at 17:16

Background image displayed multiple times on mobile device

1 Answers1