How to stretch an background image while zoom in and zoom out?

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

Now the background image is repeated while I am zoom in. But I want to stretches the right and left top banner image while zoom in and zoom out.

Thanks in advance.

possible duplicate? http://stackoverflow.com/questions/376253/stretch-and-scale-css-background — CupawnTae, Jun 11 '14 at 12:12

score 2 · Accepted Answer · edited Jun 11 '14 at 12:36

2

Try this:

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

edited Jun 11 '14 at 12:36

web-tiki

99,765
32
217
249

answered Jun 11 '14 at 12:13

aashi

492
3
11

score 0 · Answer 2 · answered Jun 11 '14 at 12:08

0

put the width in percentage in the <img src="" style="width:50%;"> tag.

answered Jun 11 '14 at 12:08

gomzy

250
1
2
10

How to stretch an background image while zoom in and zoom out?

2 Answers2