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

现在我在放大时会重复背景图像。但我希望在放大和缩小时拉伸左右顶部横幅图像。

提前致谢。

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

Answer 2

将宽度以百分比形式放在<img src="" style="width:50%;">标记中。

如何在放大和缩小时拉伸背景图像？

2 个答案: