A quick way of adding a header image to a fluid layout is 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>
Post Comments