html - 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 颜色(以防屏幕太宽。)

希望对您有所帮助。