Question

What do you do when you are trying to use a grid system (like say, 960 or blueprint or YUI) and the design contains a background image that clearly does not adhere to the columns OR gutters?

<div class="grid_4 my_background">
 A background image...
</div>

.my_background {
 background: url(someimage.jpg);
}

Answer 1

If i have understood your question, you should consider surrounding your grid div with a wrapping div (gridWrapper in the example code below), and place an absolute positioned <img> (gridBackground in the example code below) into it, with a z-index greater (if it must be looking like the picture you provided) or lower (if it is a proper background) than the underlying div containing the grid system.

With the image in the background-image css property you have no luck to control its size with IE7-IE8, since they do not support the background-size property (as you can see here).

Using an <img> element you are able to manipulate the size of this “background” according to the grid size.

<div id="gridWrapper">

    <img id="gridBackground" src="your image url" />

    <div class="grid_4">
        <!-- your grid here -->
    </div>

</div>

… and the css:

#gridBackground {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
}

div.grid_4 {
    z-index: 10;
}

If your background image has squared proportions, you are fine with it. Otherwise, you have to take care of eventual distortions or empty spaces.

If you don’t care about IE7-IE8 for some reason, you can place your image as background by doing simply:

div.grid_4 {
    background-image: url(your/image/url);
    background-size: length|percentage|cover|contain;
}

You can chose the background-size property value that fits best your layout requirements by reading here.