既然有原图，你就顺道贴出来嘛。在解决问题之前，先了解几个内容。
首先，利用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>
你定义一下链接 a{background:url(你的图片的路径)} 这是链接的背景图片a:hover{background:url(图片路径)} 这是鼠标放上去以后背影图片
我只知道这些很想帮助你，不知道你想要的效果是什么样的。至于下拉菜单是用代码来控制的，你可以在百度里找一些下拉菜单式的导航，看一下它是怎么来控制的。
