My approach may be completely off. I am in the process of building a website using sliced images from a .PSD file created by a graphic artist. Essentially, the background image consists of 4 green bars angled at 45 degrees slightly intertwined with 3 blue bars angled at 315 degrees so they intersect at the edges.
Visualize the pattern like this, with overlapping edges:
/ z-index: 0
\ z-index: 1
/ z-index: 0
\ z-index: 1
/ z-index: 0
\ z-index: 1
/ z-index: 0
I want four of the bars to appear below the other three bars. Ultimately, my goal is to animate these bars so that as you scroll up or down the page, they will move up or down. Each bar needs to be a separate element, div, or whatever it requires rather than a flattened image. The issue arises when dealing with multiple background images since z-index only applies to each element individually. If I had a separate div for each background image, then I could assign a z-index.
Each of these images is approximately 1284px wide and 769px tall. While I am open to having each background image in its own div, it doesn't seem to function properly. Can I use multiple divs, each containing its own background image? When adding a z-index in the CSS class below, I struggle to assign a z-value to each background image. If I could set a z-index for each background image in the class below, my code would work for what I aim to accomplish.
<code>
<div class="stripes">
</div>
.stripes {
position: relative;
background-image: url(/images/GreenOne_49_01.png),
url(/images/BlueOne_49_02.png),
url(/images/GreenTwo_49_03.png),
url(/images/BlueTwo_49_03.png),
url(/images/GreenThree_49_04.png),
url(/images/BlueThree_49_05.png),
url(/images/GreenFour_49_05.png);
background-position: 0px 0px,
0px 690px,
0px 690px,
0px 1378px,
0px 1384px,
0px 2075px,
0px 2076px;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
<code>