Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    262
    Thanks
    4
    Thanked 0 Times in 0 Posts

    3 div inline background image header issue

    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

    A B C

    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
    http://www.nizex.com

    Here is the current page I am working on
    http://www.nizex.com/interview.html

    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.

    Code:
    CSS
    .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;
    }
    
    HTML
    <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.
    Last edited by tripwater; 04-07-2011 at 02:36 PM. Reason: changed title


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •