Grow your CSS skills. Land your dream job.

Help adding an extra div for additional background image

  • # June 14, 2009 at 10:51 pm

    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
    # June 15, 2009 at 5:28 am

    errm looks like you got it working?

    # June 15, 2009 at 2:26 pm

    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.

    # June 16, 2009 at 11:49 am

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".