Joe's Quest

Auto-stretch asymmetric background

Auto-stretch asymmetric background

When designing the website, sometimes I need the background to be asymmetric. Here is a example: I want to keep the main content in the center of the page while extending the green bar marked by the blue box to the right. The problem is, the background attribute of body tag is already used, both the background-color and background-image. The background-image is set to a fix-height, horizontal repeated gray bar as the main background of the content. And the background-color is set to gray to make sure the background-image can merge into it at the bottom area when enlarge the window vertically. I want an extra background bar for the menu which is also extensible. That is I have to use other elements’ background attribute to achieve the goal.

It’s somewhat easy to make it with TABLE. In this way:
Put a 3 column table in the body tag. Set the table’s width to 100%. Set a fixed width for the middle column, let’s say 960px. Then the other two columns extend to left and right automatically. Just set a background image for the right column is ok.

But it’s now CSS age. I tried many times and here is what I got:

HTML:
[coolcode lang=”HTML”]


[/coolcode]
CSS:
[coolcode lang=”CSS”]
* {margin:0; padding:0;}
body {
background:#d2d2d2 url(images/bg.jpg) repeat-x;
text-align:center;
}

/* Set fixed width for main content */
#globalWrapper {
width:960px;
margin:0 auto;
text-align:left;
}

/* Set background for the header, which is not extensible */
#header {
float:left;
width:100%;
height:139px;
background-image:url(images/bg_head.jpg);
background-repeat:repeat-x;
background-position:202px 0px;
}

/* Make a container fill with the background.
Especially, set the position to absolute. So it can cover the area of the main content.
I don’t do this in globalWrapper because it’s fix-width.
I also don’t do this in body style because there is already background set in the body.
Set the z-index to -99 to make sure it’s under the main content.
*/
#extraBG {
position:absolute;
width:100%;
height:139px;
left:0;
top:0;
background:url(images/bg_head.jpg) repeat-x;
z-index:-99;
}

/* This could be the most important one. It makes a cover with same background as the body.
Float to left and set the width to 50% to mask half page.
Then it looks like the green bar extends to the right, no matter how big the window is.
*/
#extraBG div {
background:#d2d2d2 url(images/bg.jpg) repeat-x;
width:50%;
height:139px;
float:left;
}
[/coolcode]

Discussion (3)

There are 3 responses to “Auto-stretch asymmetric background”.

  1. yamaha speakers responded:

    · Reply

    I work for a regional community company and find your content material quite handy with regard to work we are running.terrific work and look forwards to more website content

  2. Thanks for posting this tip. This helped me put up a couple mockups today with background repeat problems I wasn’t sure how to solve. Divs with Position:absolute can do just about anything!

Leave a Comment to Chris Cancel Reply

Your email address will not be published. Required fields are bold.