css - 如何在放大和缩小时拉伸(stretch)背景图像？

Question

#leftHalf {
  background:url("img/header/CRC_Website_TopBannerLeftStretch.jpg") repeat scroll 0 0 / 38% 100% hsla(0, 0%, 0%, 0) ;   
   width: 50%;
   position: absolute;
   left: 0px;
   height: 190px;
   z-index:-1;
}
#rightHalf {
   background: url("img/header/CRC_Website_TopBannerRightStretch.jpg");
   width: 41.5%;
   position: absolute;
   right: 0px;
   height: 190px;
   z-index:-1;
   top:0;
}

现在，当我放大时背景图像会重复。但我想在放大和缩小时拉伸(stretch)左右顶部横幅图像。

提前致谢。

Answer 1

试试这个:

 background-image:url(../images/header-bannerbg.png);
 background-position:fixed;
 background-repeat:no-repeat;
 height:580px;
 -webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
 background-size: 100% 100%;