help needed tackling multiple background layers.

[tamrat]

i need help you guys and hello to you all too :)

i was creating this website. it has two background layers. the first one is a simple gradient map giving a smooth effect at the top and bottom. i easily put this in my css using a 2px wide crop of the bg from photoshop and applying a repeat-x. the second bg layer is a 304px high cloud and flag image that i would like to be at the top. the image fades to transparent at the bottom so that you will be able to see part of the bottom bg’s gradient map. i am having trouble here. how can i place it? i tried to create a div just below body and i specified height and z-index:-1. the image does come up but it begins at the top left corner of the screen.

to be more clear the second bg layer is 1600px wide (just in case the user uses the browser at a lower zoom level). the image’s center should be at the center of the window. my overall html document is 1000px wide, so 300px of the second bg layer should be at the right and the other 300 should be at the right of the html content.

please help? and sorry if i used bad english, its noy my first language. Thanks!

[devil3682116]

use positions, give main div relative, and child div absolute and play with z-index…if you can provide link or something then i can give solution more properly

[CrocoDillon]

You can do multiple backgrounds on the same element, where first one is closest to the eye:

body {
background: url(first), url(second);
}

[Author]

Posts