Fullscreen background with fixed position above the body and below the content - html

Question

I am attaching the 2 sample images I am using so you can get the idea.
This is the body background:
This is the fixed position div's background:
And above those two there is the content. The whole website. Between those two there are some moving stars in pure css with no interaction.
But here comes the problem. While the user scrolls the fixed background breaks in parts, stucks in positioning and sometimes the body background image disappears and shows only color in the back - all that 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);
}
Any idea will be appreciated.
(This is the bugged version http://i.imgur.com/bn0fG3j.jpg while scrolling)

Answer 1

well, I played around with your code,and it works as you intended, I would probably have done it in some other way, the code seems a bit messy but it does what you trying to achieve, check this fiddle:
http://jsfiddle.net/domusnetwork/Lkrkp/
and maybe tell me if I misunderstood you.
anyways..
I think that your problem comes from the elements you've stack on top of your background,
try using the next code snippet, it's worth a shot:
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
and if that won't help try implementing one of the techniques in the next article:
http://css-tricks.com/perfect-full-page-background-image/
have a nice day :)

Answer 2

Thank you for the answers.
Fortunately I've found the problem. It was the moving stars. They were made by idea from codepen's author using simple css with massive ammount of box-shadows as dots in 3 divs (sizes). Due the high ammount of stars it requires a lot of painting on the page while scrolling. When I removed one of the star sizes the scrolling is fine, the background stopped disappearing and it's all fine.
Seems like performance has to be above all.