Lots of Code

A nice little way of adding a header image to a fluid layout it to break the header images into two slices and then assign the headers to a div in the same container like so.

<style type="text/css">
#myContainerName
{
background: url('/path/to/images/header-back.jpg') repeat-x;
height: 220px;
}

#myContainerName #leftBackground
{
background: url('/path/to/images/header-left.jpg') left no-repeat;
height: 100%;
width: 100%;
}

#myContainerName #rightBg
{
background: url('./path/to/images/header-right.jpg') right no-repeat;
height: 100%;
width: 100%;
}
</style>

And the HTML will look like so ...

<div id="myContainerName">
<div id="rightBg">
<div id="leftBg">
<!-- Content Here -->
</div>
</div>
</div>