左右2边背景延展不同情况下的处理

看到土豆首页中，左右背景延展不同，不知怎地，受到了些许打击。自己琢磨了一夜，今天继续纠结，不过总算想出了些办法。

下面用到的xhtml都是相同的

xhtml：
<div class="bg1"></div>
<div class="bg2"></div>
<div class="wrapper"></div></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</div>

1、首先想到了还是老式生硬的办法：js处理。
js处理很笨的原理，自然是在页面载入（onload）和浏览器尺寸改变时，自动修改左右2个div，bg1、bg2的尺寸了。代码如下：

css：
* { margin:0; padding:0;}
#bg1 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; left:0; top:0; height:100px; overflow:hidden;}
#bg2 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; right:0; top:0; height:100px; overflow:hidden;}
.wrapper { width:1000px; margin:0 auto; background:#FFF;}

JS:
function ss() {
var w = document.body.clientWidth;
if(w > 1000) {
document.getElementById('bg1').style.width = document.getElementById('bg2').style.width = (w - 1000) / 2 + 'px';
}
else {
document.getElementById('bg1').style.width = document.getElementById('bg2').style.width = 0;
}
}
if (document.addEventListener) {
window.addEventListener("load", ss, false);
window.addEventListener("resize", ss, false);
}
else if (document.attachEvent) {
window.attachEvent('onload', ss);
window.attachEvent('onresize', ss);
}

2、想想是不是css也能解决这样的问题，继续纠结，总算来了点感觉，从三列排列入手，慢慢想到自动宽度的问题，慢慢问题也得到解决，代码如下

css：
* { margin:0; padding:0;}
#bg1 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; left:0; top:0; z-index:-1; height:100px; width:50%;} 其中width:50%很关键，这样能保证在不管什么尺寸下，都是左右排列
#bg2 { background:url(http://www.tgideas.com/uploads/bg_right.gif) repeat-x; position:absolute; right:0; top:0; z-index:-1; height:100px; width:50%;}
.wrapper { width:1000px; margin:0 auto; background:#FFF;}

综合来说，自然第二种方法简单易行。以前一直以为左右背景一定要一样才行，现在看来，还是我们没开动脑筋。:-)