Css 如何给两个背景图像没有任何拉伸，但需要重复

以下是我的html代码：

<div class="header">
   <div class="headerBanner">
        <a href="{$websiteUrl}index.html"><img src="img/NewTopBanner.jpg" width="885" height="190" border="0" /></a>
    </div>
</div>

这是我的HTMl和css代码

它工作，但这两个背景图像延伸到中间。我希望这两个图像（左，右）不拉伸，并重复到页面的中间

#leftHalf {
   background: url(images/bg-1.jpg);
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}
#rightHalf {
   background: url(images/bg-2.jpg);
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}

试试这个（未经测试）。这可能对你有帮助

#leftHalf {
   background: url(images/bg-1.jpg);
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}
#rightHalf {
   background: url(images/bg-2.jpg);
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}