Help adding an extra div for additional background image

[crashley1784]

Hi –
I was wondering if anyone would be kind enough to assist me with this problem.
On the site I’m designing (using WordPress 2.8) I’d like to have 2 background images – one which is positioned at the top of the page, and one that stays at the bottom of the page, behind the content area. The top image is a blue gradient (the sky), and the bottom image is a row of corn.
http://www.laurenacooper.com/mustangcreek

I’m having some major issues with the css.
Here is the code I have currently:

Code:

#corn {
width: 100%;
height: 330px;
background: url(“http://www.laurenacooper.com/mustangcreek/images/bgbottom.jpg”) repeat-x;
z-index:1;
position: relative;
bottom: 0;
left: 0;
}

I just can’t seem to find the right combination to make the corn appear at the bottom of the screen, behind the content area, and also I’d like for it to stay at the bottom of the page as the user scrolls the content. I can get it to work using fixed positioning, but fixed does not work in IE 6, and I’m concerned about browser compatibility. Is there another way to make this work? Can I add a conditional statement for IE6 so that the corn stays behind the content area at the bottom of the page, but is not fixed? (if that makes sense…)
Any help is greatly appreciated!!
Thank you

[Rob MacKay]

errm looks like you got it working?

[Squintz]

Looks like it’s working for me also. I just wanted to chime in and say that’s a very nice looking page and I like how the corn stays in view while the content scrolls. Good Work.

[crashley1784]

Thank you :)
And yes, I was able to get it working with fixed positioning, I just hope I don’t have a lot of viewers using IE 6 lol. I need to test it in that browser.
Thanks for the feedback. It’s much appreciated

[Author]

Posts