6 different Background with 4 hotspots on sides

Plese View the following picture to Easily Understand what i am going through.
https://www.thefashionhub.in/Graphic1.JPG

I Have to make this webpage which has the background as shown in the above picture.
The Black gradient Part Occupies 10% At The Left And The Right Hand Side End.
Now, The Middle Picture Takes The Remaining 80%.

What i want is that, the upper (darker purple) to be shown on the page when opened.
When We Scroll Down, The lower (lighter purple) is to be shown.

So, herez the problem:
how do i restrict the dark purple to the area that is shown when te page is loaded, as the main problem is that the resolution keeps changing from user to user.
please help me to get this sorted,
Sincerely,
Niranjan