Background image keeps resizing on mobile

Question

I have a section in my html, and I've added a background image in css as follows:

background: url('../img/landing.jpg') no-repeat center center/cover fixed;

Everything works fine, except when it comes to mobile phones and other handhelds. When scrolling up or down, the image keeps resizing and causes a shaky feeling to the website, and I used pixels in place of vh (viewport-heights) units. What could I have done wrong, or differently to avoid or fix this?

Also, I used scss and compiled it to css.

Answer 1

Try this :

position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url(../images/background.jpg);
background-size: cover;
z-index: -1;

Answer 2

Thanks. I'll try that. For now I've just disabled the scrolling effect on mobile phones. On the next update, I'll add that...