I am trying to create a header similar to the iGoogle homepage ... where you have a banner image, and then you have tiling to the left and the right of the image should you need to fill up the entire page.

I am currently doing this with tables, as I can't for the life of me figure out how to do it with divs.

Everything works fine, EXCEPT when the main image is larger than the user's screen resolution, then the browser just chops off the right side of the image, when I would rather have it center the image.

With that being said ... what would be the best way to design this so that it was resolution independent.

My current HTML is as follows:

<div id="bannerContainer"> 
    <table id="banner"> 
        <tr> 
            <td style="background-image:url( 'Themes/WinterVillage/BannerTile.jpg' );background-position: right;" class="bannerLeft"> 
            </td> 
            <td style="background-image:url( 'Themes/WinterVillage/Banner.jpg' );background-position: left;" class="bannerMiddle"> 

        <!-- The search box is displayed here, just leaving it out for easier code read -->

            </td> 
            <td style="background-image:url( 'Themes/WinterVillage/BannerTile.jpg' );background-position: left;" class="bannerRight"> 
            </td> 
        </tr> 
    </table> 
</div> 

My current CSS is as follows:

#bannerContainer
{
    height: 175px;
    overflow: hidden;
}

#banner
{
    height: 175px;
    width: 100%;
}

#banner .bannerLeft, #banner .bannerRight
{
    background-repeat: repeat-x;
    width: 50%;
}

#banner .bannerMiddle
{
    text-align: center;
    width: 1200px;
    vertical-align: top;
}

If there is a better way ... please let me know! Thanks in advance!

2 answers

0
points

It's pretty tricky, but the way they do it is this (mind you, this isn't the same for all the themes, just ones like Tea House):

  1. Set a background tile image and have it tile horizontally
  2. Make an image that covers the center of the screen, leave enough transparent area to appear as though you blend in with the background image.
  3. Viola!

It's actually just a clever optical trick that makes it look like there is more to the image than just the centered bit.

Here are the relevant bits:

  1. Background Image
  2. Front Image
Answered almost 7 years ago by Nathan DeGruchy
  • This is kind of what I am doing, but with TABLES, how would the CSS look for this solution? mattruma almost 7 years ago
0
points

A DIV approach wouldn't be difficult. Simply go:

<div id="bannerContainer">
<div id="centerPart">
<!-- The search box is displayed here, just leaving it out for easier code read -->
</div>
</div>

And the CSS:

#bannerContainer {
background: url( 'Themes/WinterVillage/BannerTile.jpg') center repeat-x; // centered so that resizing the window would "scroll out" from both left and right
}

#centerPart {
max-width: [however wide your middle background is];
background: url( 'Themes/WinterVillage/Banner.jpg') center no-repeat;
text-align: center;
}

Hope that helps!

Answered almost 7 years ago by Andy Zhang