View Full Version : 3 div inline background image header issue

04-07-2011, 03:28 PM
The website I was asked to fix has a home page with a flash file. But they want all other pages to not have the flash file and just load an image that looks like the flash file when it is finished loading. In order for this to work I had to take the sides of the image and create repeating backgrounds since each side of the image is in different shades.

So what I have is a header in 3 sections


B is the main image and is centered between A & C

I have an image I want as a background in A and another image in C

The image in A is darker than C because the left side of the main image is darker. when resizing the browser I need for B to stay centered and A & C grow and repeat x in their respective divs. I have tried to do this with all 3 divs set to inline and A & C with set heights and repeat x background and width set to auto but not doing it for me :)

To summarize I need a header where the left and right sides grow and the middle image stays centered, keeping in mind that the left and right sides are 2 different images so I can't just put a single repeating image all the way across.

here is the home page so you can see what the end result needs to look like

Here is the current page I am working on

You will notice the main image and on each side you will find my background images ( not repeating ). The left background image already existed on this site becuase it was repeating all the way across and looked bad once it reached the right side of the header.

.header-left {
background: url("images/top-tail.gif") repeat-x scroll 0 0 #EFF4F5;
display: inline;
float: left;
height: 425px;
width: auto;

.header-middle {
display: inline;
height: 425px;
width: 994px;

.header-right {
background: url("images/right-side-header.gif") repeat-x scroll 0 0 #EFF4F5;
display: inline;
float: right;
height: 425px;
width: auto;

<div class="header-left">&nbsp;</div>

<div class="header-middle"><img src="http://www.nizex.com/images/header-bg.png" border=0></div>

<div class="header-right">&nbsp;</div>

Any help with this would be great.