two backgrounds! can it be done?

[christopher]

Hi

i want two backgrounds on my document.

the first, a centered vertically repeating gradiented column background (transparent .png)

then UNDERNEATH it i want to put a stripe pattern on. (separate img)

this is so it will adapt to different resolutions.



anyone any ideas?


christopher

[christopher]

if it helps then this is the link

http://www.vibrantcolour.co.uk/dev/

all css is inline atm so you can see it

[Aso]

You can use the html and body elements of your HTML to create a layered background.

Since html appears before body in the semantic structure of your HTML, this will be the 'lower' layer of the two (any background you apply to body will mask over html)

An example CSS

Code: Select all

html {
background: #fff url('path/to/seperate/img.png') no-repeat 0 0;
}
body {
background: url('path/to/transparent.png') repeat-y 50% 0;
}

If you're having problems, upload the changes and I'll check it out

[christopher]

thanks aso, will try that now.

[delusion]

Keep in mind that IE6 doesn't support transparent .png's..

[christopher]

yes, i will.

[christopher]

thanks, it works now!


http://www.vibrantcolour.co.uk/dev/