css rounded boxes ontop of each other

how would i create a webpage like above using css. placing boxes ontop of each other?

Many ways. z-index will make things easier for you. It rather depends on if the boxes are fixed width/height, where they are in the source, and the type of corners you're using.

well i was thinking of using this as a base http://www.456bereastreet.com/lab/teaser/ ill be using two images one for the top of the box, one for the bottom and then have a background image for the rest of the box. basically i want 3/4 boxes on top of each other, each has a header/title and when the header/title is clicked that box is brought forward. the boxes would stay fixed size and width.

not sure what you mean by where they will be in the source. the page will look mostly like the image but with different colours, text in the boxes and not much else.

Z-index and positioning are what you'll need then. Just position the boxes inside a div, then use z-index to make certain ones be over the others.

i having problems with my css. ive got the following image:



ive split it into three part (top, middle and bottom). with the css i can get the top and bottom to display correctly but im having trouble with the middle the gradient is not showing up i think its just using a slice of it. any ideas?

heres how it turns out:



heres the code:

Looks like the gradient image is bigger than the box it's in.

your right.

Another question - how would i set up the divs to display the boxes on top of each other?

position: absolute; and z-index: 1;, z-index: 2;, etc.