CSS：如何在内容的左侧和右侧创建背景

Question

我正在尝试创建此布局。

我希望通过IE 8及其他标准网络浏览器访问布局。所以我不想使用CSS3，如果可能的话。

到目前为止，我得到了这个（它没有页眉和页脚，因为这些是原始的添加）：

HTML：

<div class="right">
  <div class="left">
    <div class="container clearfix">
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    </div>
  </div>
</div>

CSS：

.right {background: url('images/bgr.jpg') no-repeat scroll right top #FFFFFF;}
.left {background: url('images/bgl.jpg') no-repeat scroll left top transparent;}
.container {width: 960px; margin: 0 auto; position: relative; text-align: left; border: 1px solid red;}
.clearfix:after {clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden;}

问题是，当我以低于（pic1Width + pic2Width + contentWidth）的分辨率打开它时，图片将覆盖内容，使其消失。我也无法在图片1和2的左侧和右侧添加流畅的空间。

感谢任何提示！

Answer 1

我假设中心内容在margin:0, auto;

中间固定

如果是这样的话，我会

body
{ 
background-image:url('background.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center; 
}

并创建背景图像，以便a）图片拥抱内容的任何一面，b）边缘渐变成一种足够坚固的颜色，以匹配bg颜色（如果屏幕太宽。）

希望有所帮助。

Answer 2

据我了解这个问题，this就是你想要的，使用<table>比使用<div>更容易创建。

Answer 3

好的，所以我找到了一个有效的解决方案。

<div class="container">
  <div class="container_center">
    <div class="left"></div>
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    This is an example text<br />
    <div class="right"></div>
  </div>
</div>

CSS：

.container {
   position: absolute;
   overflow: hidden;
   height: auto;
   width: 100%;
   top: 0px;
   z-index: 2500;
}

.container_center {
   position: relative;
   background-color: green;
   height: auto;
   width: 400px;
   margin:0 auto;
}

.left{
   position: absolute;
   background: #fff url('images/bgl.jpg') no-repeat 0 100%;
   height: 100%;
   width:100%;
   top: 0px;
   left: -100%;
}

.right {
   position: absolute;
   background: #fff url('images/bgr.jpg') no-repeat 0 100%;
   height: 100%;
   width:100%;
   top: 0px;
   left: 100%;
}

您可以查看类似问题的小提琴：http://jsfiddle.net/pGYsL/