Content needs to appear above a background but hide behind an image

Hi

It looks like I got a bit cocky and sold a design to one of my clients that I am having trouble building.

Please take a look at the attached file so you can see what I am talking about.

  1. The web page’s height dynamically needs to expand vertically.

  2. The swirly design in the background has to stay at the bottom with the footer when the web page expands.

  3. The yellow area represents the place where I need to put content that will also expand vertically. It needs to stay behind the circle herb images and in front of the swirly design.

  4. The circle herb images can never move in position nor can the navigation.

Please go to the following URL and you can see what I have designed so far.

http://www.webskillsplus.com/massage/index.html

Take a look at demo.css

html {
	background: #5e88a2 url(../img/dice_slice.jpg) repeat-x;
}
body {
	padding: 0;
	margin: 0;
	background: url(../img/bg.jpg) no-repeat center top;
	width: 100%;
	display: table;
}
.header	{
	width: 960px;
	background: url(../img/header.jpg) no-repeat center top;
	height: 196px;
}
.footer	{
	float: left;
	width: 960px;
	background-color: #b9b299;
	height: 86px;
}
.container_12 {
	height: 100%;
	background: url(../img/design.jpg) no-repeat center bottom;
}

I could make .container_12 solid white but it covers the circle herb images.

  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).