既然有原图，你就顺道贴出来嘛。在解决问题之前，先了解几个内容。
首先，利用DIV+CSS的办法虽然可以更方便的设置背景。但是有一个前提条件。就是背景的可重复性。这个背景不能是渐变色，只能是有规律的可平铺图片。
由于之前的那个背景是渐变色，即便是CSS3，也无法限制背景图只重复某一个区域的图像。
因此要在一个不固定高度的DIV中使用渐变的背景图，当超出背景的高度后，此渐变背景将被重复，此时会非常难看。
如果题主仍然希望使用渐变背景又想解决此问题，切图其实难以解决楼主的问题。
以Title部分为例，切图后，这图片的大小也是不容小视，至少80~100px。
而左侧圆孔的灰色渐变，目测也到300px的位置，其后才能在重复时有美观的效果。
如果希望使用渐变，只有一个解决办法，就是固定背景+固定DIV高度+DIV滚动条，使用者通过滚动DIV中的滚动条来阅览内容，而不是滚动页面的滚动条。
木板背景的图片目测是复制后垂直翻转制成，如果没有下面那半，也是难以垂直重复图像。
如果题主能重新制作背景图，以便于更好的平铺背景，可以考虑“倒贴的老邮票”的实例。
另，如果题主有意给高分悬赏，其实可以早点设置，这样可以吸引更多的人来回答问题。
最后，在题主的网站上的，用到了Position，此处的Main我用了Padding与Margin来解决。可以的话，建议少用Position。
另外给两个链接，关于解决问题用到的CSS：
Background：http://www.w3school.com.cn/css/pr_background.asp
overflow：http://www.w3school.com.cn/css/pr_pos_overflow.asp
<!DOCTYPE html><html>
<head>
</head>
<body>
<div class="main">
<div class="title">
<br>
全部的视频<a href="
点击切换排列方式">[最热]</a>
</div>
<div class="article">
<hr>
<table width="753" border="0" height="2000" align="center">
<tbody>
<tr>
<td valign="top">
<form method="post" action="
<br>
筛选查看:人物:
<select name="tag1" size="1">
<option value="0">-不选-</option>
<option value="1">集体</option>
<option value="2">个人</option>
<option value="3">小伙伴们</option>
</select>
场景:
<select name="tag2" size="1">
<option value="0">-不选-</option>
<option value="1">教室</option>
<option value="3">宿舍</option>
<option value="4">实践活动</option>
<option value="5">第37届运动会</option>
<option value="6">第38届运动会</option>
</select>
排列:
<select name="order" size="1">
<option value="new">按时间</option>
<option value="hot">按点击</option>
</select>
<input name="listname" type="hidden" value="video">
<input name="from" type="hidden" value="pagejump">
<input type="submit" value="查看">
</form>
<div class="viewtext">
<br>
[点击量:17]  [发布时间:]  拍摄时间:2012-10-18
<br>
[人物:<a href="
集体</a>]  [场景:
<a href="
第37届运动会</a>]
</div>
</td>
</tr>
<tr>
<td height="100" align="left" valign="top">
<hr>
<div class="button">
共有6页，现在1页，记录共11个
<br>
<a href="
下一页
</a>
<a href="
尾页
</a>
<form method="post" action="
<input name="gotopage" size="5" type="text" value="1">
<input name="from" type="hidden" value="pagejump">
<input name="buttonurl" type="hidden" value="?list-video-0-0">
<input name="order" type="hidden" value="hot">
<input type="submit" value="跳页">
</form>
<strong>
<a href="
回首页
</a>
</strong>
</div>
<br>
<div class="addfav">
<a onclick="SetHome(window.location)" href="javascript:void(0)">
设为首页
</a>
|
<a onclick="AddFavorite(window.location,document.title)" href="javascript:void(0)">
加入收藏
</a>
</div>
</td>
</tr>
</tbody>
</table>
DIV内全是内容，内容只在DIV内滚动。<br>
DIV内全是内容，内容只在DIV内滚动。<br>
</div>
</div>
<style type="text/css">
body{
padding:0margin:0width:980pxbackground:url('
)background-attachment:fixedoverflow:hidden}
.main{
width:750px
margin-left:200px
margin-top:100px
}
.title{
height:80px
padding-left:100px
background-image:url(
)
background-repeat:no-repeat
background-attachment: fixed
background-position:200px 80px
}
div.title{text-align:center font:normal 28px '楷体'color:#000000font-weight:bold}
.article{
height:600px
padding-left:100px
background-image:url(
)
background-repeat:no-repeat
background-attachment: fixed
background-position:200px 80px
overflow:scroll
}
hr{
width:auto
margin:0
}
table{
border-collapse:collapse
border-spacing:0
}
th,td{
padding:0
}
div.a:link { color:#000000 text-decoration:underline }
div.a:visited { color:#09006a text-decoration:none }
div.a:hover { color:#000000 text-decoration:none }
div.a:active { color:#FFFFFF text-decoration:none }
a.index{margin:0padding:0color:#000000}
p{color:#000000font-weight:normalmargin:0padding:0}
div.foot{margin:0padding:0text-align:centerfont-size:12pxcolor:#000000text-decoration:none}
div.addfav{margin:0padding:0font-size:12pxcolor:#000000text-decoration:none}
div.viewtitle{position:relative text-align:center font:normal 15px '宋体'color:#3900fffont-weight:bold}
div.viewtext{position:relative text-align:left font:normal 12px '宋体'color:#000000}
div.button{margin:0padding:0font-size:14pxcolor:#000000text-align:left}
div.view{margin:0padding:0text-align:center}
.box{background-color: transparentborder-bottom: 1px solid #ccccccborder-right-width: 0pxborder-left-width: 0pxborder-top-width: 0pxborder-top-style: noneborder-right-style: noneborder-left-style: nonepadding: 0pxmargin: 0}
</style>
</body>
</html>
<style>ul,li{padding:0margin:0list-style:none}
ul {
width:220px
height:30px
}
ul>li{
display:block
width:70px
height:30px
line-height:30px
float:left
font-size:12px
text-align:center
border:1px solid rgb(225,30,100)
}
ul>li:first-child{
background:rgb(225,30,100)
color:#ffffff
-moz-border-radius:5px 0 0 5px /* Gecko browsers */
-webkit-border-radius:5px 0 0 5px /* Webkit browsers */
border-radius:5px 0 0 5px /* W3C syntax */
}
ul>li:last-child{
-moz-border-radius:0 5px 5px 0 /* Gecko browsers */
-webkit-border-radius:0 5px 5px 0 /* Webkit browsers */
border-radius:0 5px 5px 0 /* W3C syntax */
}
ul>li:nth-child(2){
border-left:none
border-right:none
}
</style>
<ul>
<li>最热</li>
<li>最新</li>
<li>热销</li>
</ul>
这是CSS3的，，，因为圆角，是CSS3的新属性，，
我以开发人员的观点推荐下，选择权还是靠楼主自己
最实用的浏览器。(国产)
1 UC浏览器
从我用Android手机起，开始用，看着它成长。那时候它还是一个欧朋浏览器的一个复制品，连界面都是基本1:1 高仿欧朋
QQ浏览器
没用过，不知道，但凡是做微信第三方开发的前端，我估计都会吐槽几句X5内核，微信的浏览器内核X5提供，跟IE差不多。开发很多东西，新技术X5不支持。2个字，巨坑
其它的不介绍了，大同小异
最好的，或者最快的(Android)
谷歌浏览器
肯定自家的了.而且最先用最新内核技术，但是它是外国的，可能不适合新手或者常人用，一般我用它来做调试功能用
------以下如果楼主想看可以看看
第一、楼主，浏览器快跟网速是最大的挂钩，接下来就是对javascript脚本的解析了，目前最快的就是谷歌 V8引擎
世界主打有内核的也就那么几家。国产没有， 有IE ，谷歌， 欧朋。火狐。 其它国产，全部是谷歌开源的，
还有什么QQ浏览器 X5内核， 就骗骗小白，如果你是开发人员，或者是前端的，就知道它是多垃圾，带领我们走进IE6时代， 很多新的技术如CSS3跟 HTML5新的技术不被支持。导致我们在微信开发上遇到很多坑。只能用图片代替，其实他就是拿谷歌 Android的一个控件改改。而css3跟HTML5技术最大的优点把最炫的效果而且用最大的两端区分技术来处理，就是如果以前做一个效果，可以能要做大量图片来处理，这对于手机用户下载是一个很大的弊端，对服务器也是一个压力。对网速更是一个高点的要求，新的技术用原生分离，代码体积小，实现原生渲染，那么打开速度自然而然快了。
好吧，扯远了，
首先从习惯来说，国产的浏览器，肯定是符合国人的，IOS我们不说，但是Android都不是自己的内核，主内核都是谷歌的，只是自己改改而已.
为什么IOS不说，因为IOS规定就是基本用自家的safari浏览器。基于webkit内核开发。
国产最热的 UC
适合小白(懒人)用，带有一些快捷入口。
你要最好的
谷歌最新版本浏览器，4.6，最新内核Blink,它的旧版本是webkit内核，bk内核跟IOS上的内核可以说敢一拼。它支持的JS解析运行跟 PC都基本一样，如果用JS写一段脚本动态效果，在PC端可能非常流畅，在手机端可能很卡，而且谷歌的最新版本Blink内核刚好解决这些，非常流畅。很PC不相上下.
别听国产浏览器吹牛逼。
以后我不知道，至少现在。什么什么X5内核，什么什么内核，都是基于谷歌主内核开发。
