View Full Version : Content needs to appear above a background but hide behind an image.

02-01-2012, 09:22 PM

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.


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.

02-02-2012, 10:58 AM
look into css command


it should do what you need