@apple4us typical "wolf's coming" for the gov has done 2 much evil. Hard 2 believe not related 2 them. Haha.
«
»

Auto-stretch asymmetric background

October 29th, 2008 by Tkjune

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:

  1. <body>
  2.     <div id="globalWrapper">
  3.         <div id="header"></div>
  4.     </div>
  5.     <div id="extraBG">
  6.         <div></div>
  7.     </div>
  8. </body>

CSS:

  1. * {margin:0; padding:0;}
  2. body {
  3.     background:#d2d2d2 url(images/bg.jpg) repeat-x;
  4.     text-align:center;
  5. }
  6.  
  7. /* Set fixed width for main content */
  8. #globalWrapper {
  9.     width:960px;
  10.     margin:0 auto;
  11.     text-align:left;
  12. }
  13.  
  14. /* Set background for the header, which is not extensible */
  15. #header {
  16.     float:left;
  17.     width:100%;
  18.     height:139px;
  19.     background-image:url(images/bg_head.jpg);
  20.     background-repeat:repeat-x;
  21.     background-position:202px 0px;
  22. }
  23.  
  24. /* Make a container fill with the background.
  25.     Especially, set the position to absolute. So it can cover the area of the main content.
  26.     I don't do this in globalWrapper because it's fix-width.
  27.     I also don't do this in body style because there is already background set in the body.
  28.     Set the z-index to -99 to make sure it's under the main content.
  29. */
  30. #extraBG {
  31.     position:absolute;
  32.     width:100%;
  33.     height:139px;
  34.     left:0;
  35.     top:0;
  36.     background:url(images/bg_head.jpg) repeat-x;
  37.     z-index:-99;
  38. }
  39.  
  40. /* This could be the most important one. It makes a cover with same background as the body.
  41.     Float to left and set the width to 50% to mask half page.
  42.     Then it looks like the green bar extends to the right, no matter how big the window is.
  43. */
  44. #extraBG div {
  45.     background:#d2d2d2 url(images/bg.jpg) repeat-x;
  46.     width:50%;
  47.     height:139px;
  48.     float:left;
  49. }

This entry was posted on Wednesday, October 29th, 2008 at 1:01 am and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.

2 Responses to “Auto-stretch asymmetric background”

  1. yamaha speakers Says:
    November 16th, 2010 at 9:03 pm

    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. ^ Says:
    February 10th, 2012 at 7:57 pm

    Wonderful remaining going to your weblog once more, many experts have months to me. Very well this kind of content which i have been recently silently laid regarding such a long time. I want that write-up so that you can comprehensive my job interior school, possesses exact subject with all your posting. With thanks, beneficial discuss.

Leave a Reply