CSS Fix: background image problem for centralised layout

Ok, here’s the problem. You got a centralised page layout, and a funky background image attached to either the page body or somekind of wrapper. It looks great until you start stretching your browser window back and forth, or you begin trying out different resolutions… at which point the bg image is no longer central to the rest of layout.

Here’s what ya do:

body, .wrapper
{
background: #whatever url(whatever.jpg) repeat-x center top;
/* the magic… */
width: 100%;
display: table;
}

Spread the love.