Wednesday, June 27, 2012

Browser Background Image Expand Past Viewport

#background_layer1 {
    position: absolute;   
    text-align: center;   
    min-height: 100%;
    min-width:  100%;
    margin: auto 50% auto auto;
    padding: auto auto auto auto;
    background: url(images/Background_Stripes.png) scroll;
    z-index: 1;
}

I had something like the above for one of the background images I was using on a certain page.  I had layered others on top of this, but stylistically they were defined the same as above.

I had a problem where my background image(s) would only render to the size of my viewport. Content which appeared outside of that range, and could only be read by 'scrolling' did not have any background image(s) behind them.

This was frustrating.

I finally realized that my body and html styling was causing the problem.

html, body {
    position: absolute;
    text-align: center;   
    height: 100%;
    width: 100%;
    margin: auto auto auto auto;
    padding: auto auto auto auto;
}

Setting the height and width to 100% cropped the size of the image associated with the background_layer ID.

html, body {
    position: absolute;
    text-align: center;   
    min-height: 100%;
    min-width: 100%;
    margin: auto auto auto auto;
    padding: auto auto auto auto;
}

Changing height and width to min-height and min-width allowed a solution to be reached.

No comments:

Post a Comment