CSS challenge: Two background images, centered column with fixed with, min-height 100%_问答_开发者

In a nutshell

I need a CSS solution for the following requirements:

Two vertically repeated background im开发者_JS百科ages, one aligned to the left, one aligned to the right
One centered column on top with fixed width and a minimum height of 100%
Cross browser compatibility

A little more details

Today a new requirement for my current web site project came up: A background image with gradients on the left and right side (replaces the current body background image). The challenge is now to specify two different background images while keeping the rest of the layout spec. Unfortunately the (simple) layout somehow doesn't go with the two backgrounds.

My layout is basically one centered column with fixed width:

#main_container {
    background-color: white;
    margin: 0 auto;
    min-height: 100%;
    width: 800px;
}

Furthermore it's necessary to stretch the column to a minimum height of 100%, since there are quite some pages with only little content. The following CSS styles take care of that:

html {
    height: 100%;
}

body {
    background-image: url('old-background.png');
    margin: 0;
    height: 100%;
    padding: 0;
}

So far so good - until the new body background image with gradients arrived. I tried the following solutions

Two absolute positioned divs behind the main container
One image defined with the body, one with the html CSS class
One image defined with the body, the other one with a large div begind the main container

With either one of them, the dynamic height solution was ruined. Either the main container didn't stretch to 100% when it was too small, or the background remained at 100% when the content was actually longer

Modified:

<body>
  <div class="container"><div>
  <div id="main_content"></div>
</body>

With css:

html {
  height: 100%;
}
body {
  background: url(left.png) repeat-y top left;
  background-attachment:fixed;
  height: 100%;
  margin: 0;
  padding: 0;
}
div.container {
  background: url(right.png) repeat-y top right;
  height: 100%;
  width: 100%;
  position:fixed; /* This won't work in all browsers. May need a JS solution for IE6 */
}
#main_content {
  height: 100%;
  width: 800px;
  margin: 0 auto;
  background-color: white;
}

Edit:

This version works for browsers that support position:fixed (not ie6).

Example page: http://jsbin.com/ebozi3/4/edit

Using a "layout table", my issue can be solved. A pure CSS solution, however, would be preferred!

Here's a working table-based solution:

table.layout {
  border-collapse: collapse;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

table.layout td {
  margin: 0;
  padding: 0;
  vertical-align: top;
}

td.layout_left {
  background-image: url('background-left.png');
  background-position: top left;
  background-repeat: repeat-y;
}

td.layout_center {
  background-color: white;
  width: 800px;
}

td.layout_right {
  background-image: url('background-right.png');
  background-position: top right;
  background-repeat: repeat-y;
}

And the HTML code:

<table class="layout">
  <tr>
    <td class="layout_left">&nbsp;</td>
    <td class="layout_center">
      <!-- content -->
    </td>
    <td class="layout_right">&nbsp;</td>
  </tr>
</table>

[revamp]

I'm silly. Very.
Problem: body needs to have bg images, #main_container needs to have 800 width and in the center.
(Lousy approach: I was doing #main_container with bg images, not centered, 800px.)

New approach: I suggest a div inside body and a span inside that new div:

<body>
<div>
<span>
  <div id="main_container">
    Regular contents.
  </div>
</span>
</div>
</body>

Then:

body {
  background: url(img/bg_left.gif) repeat-y top left;
}
body>div {
  background: url(img/bg_right.gif) repeat-y top right;
}
body>div: {
  text-align: center;
}
body>div>span {
  display: inline-block;
  /* IE only likes this rule on elements that are inline by nature, thus the use of span.
  I'm not sure 100% height will work on #main_container. */
}

And your regular rules:

#main_container {
  background-color: white;
  margin: 0 auto;
  min-height: 100%;
  width: 800px;
}

CSS challenge: Two background images, centered column with fixed with, min-height 100%

精彩评论

关注公众号

热门标签

图文推荐

CSS challenge: Two background images, centered column with fixed with, min-height 100%

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：