背景图片

用合并图当背景  真的不大会图片如图
问题:  写的很糟糕  包括css 和js ,我想知道 一般拿背景图来用   是不是这样写的???? 请指教代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style type="text/css">
.btnleft{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); float:left}
.btnmiddle{height:21px; width:60px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -21px;float:left; text-align:center; line-height:21px; vertical-align:middle}
.btnright{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -42px;float:left;}
.btnleft1{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); float:left; background-position:0px -399px;}
.btnmiddle1{height:21px; width:60px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -420px;float:left; text-align:center; line-height:21px; vertical-align:middle}
.btnright1{height:21px; width:4px; background-image:url('http://album.hi.csdn.net/app_uploads/wtcsy/20090605/140833261.p.gif'); background-position:0px -441px;float:left;}
</style>
<body style="font-size:12px;">
<div >
<div class="btnleft1"></div>
<div class="btnmiddle1">确定</div>
<div class="btnright1"></div><div style=" clear:both"></div>
</div>
<br>
<div >
<div class="btnleft"></div>
<div class="btnmiddle">确定</div>
<div class="btnright"></div>
</div><br><br><br>
<div>
<div class="btnleft"></div>
<div class="btnmiddle" onmouseover="ss(this)" onmouseout="ss(this)">确定</div>
<div class="btnright"></div>
</div>
</body>
<script>
function ss(obj){
obj.className=obj.className == "btnmiddle"?"btnmiddle1":"btnmiddle";
    obj.previousSibling.className=obj.previousSibling.className == "btnleft"?"btnleft1":"btnleft";
obj.nextSibling.className=obj.nextSibling.className == "btnright"?"btnright1":"btnright";
/*
obj.className=obj.className == "btnmiddle"?"btnmiddle1":"btnmiddle";
    obj.previousSibling.previousSibling.className=obj.previousSibling.previousSibling.className == "btnleft"?"btnleft1":"btnleft";
obj.nextSibling.nextSibling.className=obj.nextSibling.nextSibling.className == "btnright"?"btnright1":"btnright";
*/
//注释掉的是在ff下可以运行的    我真的不知道该怎么克写......... 我希望写的简洁  简单  似乎做不到
}
</script>