CSS：如何在内容的左侧和右侧制作背景

Question

我正在尝试创建此布局。

我希望可以通过 IE 8 及更高版本以及其他标准 Web 浏览器访问该布局。所以我不想使用 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

好的，我找到了一个可行的解决方案。

<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/

Answer 2

我假设中心内容用margin:0, auto;固定在中间

如果是这样的话，我会

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

并创建背景图像，以便 a) 图片紧贴内容的任一侧，b) 边缘淡化为足够纯色以匹配 bg 颜色的颜色（以防屏幕太宽。）

希望对您有所帮助。

Answer 3

据我了解，this 是您想要的，使用<table> 比<div>s 更容易创建。