Grow your CSS skills. Land your dream job.

div background images

  • # July 11, 2008 at 12:03 pm

    I am having problems repeating a div background on a y-axis if the div contains another div with a background image?

    So far my CSS code looks like this:

    #topImage {
    width:930px;
    background-image: url(../images/paperBKGWHT.png);
    background-repeat: repeat-y;
    padding-left: 3px;
    }

    #bottomImage {
    background-image: url(../images/paperBKGBottom.png);
    background-repeat: no-repeat;
    width: 930px;
    background-position: bottom;
    vertical-align: bottom;
    }

    My HTML looks like this:

    <body>
    <div id="topImage">
    <div id="bottomImage"
    </div>
    </div>
    </body

    When viewed in a browser the "topImage" repeats on a y-axis and pushes the "bottomImage" off of the page.

    If I specify a height to the "bottomImage" div it works fine, but I don’t want to have to create 15 different CSS layouts just for this effect to work on all pages.

    Anyone got any ideas????

    # August 10, 2010 at 2:36 pm

    Try changing your css to this.

    #topImage {
    width:930px;
    background-image: url(../images/paperBKGWHT.png) top left no-repeat;
    padding-left: 3px;
    position:relative;
    }

    #bottomImage {
    background-image: url(../images/paperBKGBottom.png) bottom left no-repeat;
    width: 930px;
    position:absolute;
    bottom:0;
    }

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

You must be logged in to reply to this topic.

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