Here are the two sample images I am using to give you an idea.
This represents the background of the body:
This is the background for the fixed position div:
Above these two elements lies the website content. In between them, there are some moving stars created using pure CSS without any user interaction involved.
However, a problem arises when the user scrolls. The fixed background tends to break into parts, gets stuck in its positioning, and at times, the body background image disappears, revealing only the background color while scrolling.
body {
font-family: 'LatoRegular', 'Lucida Grande', Helvetica, sans-serif !important;
line-height: 21px;
color: #636e7b;
overflow: hidden; /*removes it after preloader quits*/
position: relative;
background: #1d2939 url("../images/backgroundv2.jpg") fixed;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
}
#fix {
background: transparent url("../images/backgroundv2.png") fixed;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: center top;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1;
-webkit-transform: translateZ(0);
}
I would appreciate any ideas or suggestions to resolve this issue.
(To view the buggy version while scrolling, click here)