如何给出两个背景图像，但不需要重复

Question

这是我的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>

这是我的CSS：

.header {
    position: relative;
    background:url('img/header/CRC_Website_TopBannerLeftStretch.jpg'),url("img/header/CRC_Website_TopBannerRightStretch.jpg");
    background-position:left, right;
    background-size:50% 100%;
    background-repeat:no-repeat;
}
.headerBanner {
    width: 885px;
}

这是我的HTMl和css代码。

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

Answer 1

#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%;
}

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