1) The page will expand automatically so you don't need to do anything special for point 1.
2) Place the swirly image as background to the page wrapper and position it at 50% 100% and it will always remain at the bottom.
3) Nothing special needed here just another container in the normal flow and it will automatically sit on top of the swirly images.
4) Not Sure what you mean by "never move"? I would place the 4 circles as 4 absolute elements placed into position with a z-index to keep them on top of everything. Add position:relative to the wrapper and then you can place them in respect of the wrapper and they will always remain at that position (unless you are talking about position:fixed of course). You don't need to do anything special for the nav unless you wanted a fixed positioned navigation but I would advise against that unless it was either the first or last element on the page.
I wouldn't use a grid system for that as you have too much code before you even start. CSS is its own grid system so just create what you need (unless you were just using it for wireframing of course).