My Parallax scrolling website has a div called "bg" with dimensions of 8000px height and 960px width. The entire page is designed to fit this size, including the body background. However, I am facing an issue where setting the background for "bg" breaks the body background. Is there a way to display both backgrounds without one interfering with the other?
Example code:
<div class="container">
<div id="bg"></div>
</div>
CSS
body{
font-family: Comic sans, Arial, Helvetica, sans-serif;
font-size: 100%;
line-height:normal;
direction: rtl;
background: lightblue url('../images/notinuse/clouds.png') top center repeat-y;
z-index:101;
}
#bg {
background: blue;
width: 960px;
height: 8000px;
position: fixed;
z-index: 100;
top: 0;
}
Adding a background to "bg" causes the clouds to break when they reach the zoom level of "bg". While I understand why this happens, I'm not sure how to make it flow seamlessly. Any suggestions would be greatly appreciated.
Edit >
For a clearer example, here is a screenshot with a strong blue background Dropbox Screenshot. As shown in the screenshot, the clouds do not continue into the "bg" section. I am looking for a way to make them visible in the background of "bg".