CSS images problem

I'm havin开发者_如何学Pythong some problems traying to place 3 images into a background, I mean, I have one image on top, actually a is 2000x550 pixels, then I need to leave 200px (vertical) and place another image that cover also the all the center and them one image into the footer.

Do you think that is better to make a full image a place it? full it's about 30KB. Or there is any way to place it using css?

Kind Regards

You should be able to achieve this with css z-index. See the following links for more information:

W3C Schools explanation of z-indexes: http://www.w3schools.com/Css/pr_pos_z-index.asp

Indepth explanation of z-index's from Smashing Magazine: http://www.smashingmagazine.com/2009/09/15/the-z-index-css-property-a-comprehensive-look/

To answer the question of how to place the header image, the best way would be to define a div with a specified height (a 550px tall header seems awfully large to me, but hey, its your site) and width (probably set to 100%), and use the background-image css property to place the image there. This will prevent any side-scrolling.

A sample of the what you have going on to go with the sample images would be nice. From your description though it sounds like you have not implemented the z-index properly. My guess is that you need to declare the position of the divs you are adding a z-index to. Even if it is position:relative you still have to declare it or the z-index doesn't work.

-- Edit for real answer --

After looking at your images this is not actually that hard to implement. Here is how I would do it -

1. Set the background of BODY to white and the green/pink/gray background:

   body{background:URL(images/green-pink-gray_bg.png) #fff no-repeat;}

2. Set the background of the DIV to the gray image -

   div#gray{background:URL(images/gray_bg.png) #fff no-repeat;}

There is no need to set the z-index of anything since the div with the gray background is already "on top" of the BODY of the page. Using PNG images with transparent backgrounds will allow the white background to show through anywhere it is not covered by one of the background images.