css - Background image stretch y-axis only, keep repeat-x -

i have image set background image of div. div size changing , inside image gradient.

css:

#scroller_shadow{     background-image:url(../img/ui/shadow.png);     background-repeat:repeat-x;        background-position:top; } 

i need cross-browser solution making image fit height of div in y-axis only, keeping repeat-x. div being resized dynamically via jquery.

their might cross-browser option using jquery. don't mind using scripts achieve in order cross-browser support (ie7+). don't want stretch image because loses intensity when stretch image on x-axis, making semi-transparent png image transparent.

thanks.

i had problem too. it's easy in browsers, ie8 , below it's tricky.

solution modern (anything not ie8 , below) browsers:

#scroller_shadow {     background: url(../img/ui/shadow.png) center repeat-x;     background-size: auto 100%; } 

there jquery plugins can mimic background-size ie8 , below, backgroundsize.js doesn't work if want repeat.

anyways begins terrible hack:

<div id="scroller_shadow">     <div id="scroller_shadow_tile">         <img src="./img/ui/shadow.png" alt="" >         <img src="./img/ui/shadow.png" alt="" >         <img src="./img/ui/shadow.png" alt="" >         ...         <img src="./img/ui/shadow.png" alt="" >     </div> </div> 

make sure include enough <img>'s cover area needed.

css:

#scroller_shadow {     width: 500px; /* whatever width */     height: 100px; /* whatever height */     overflow: hidden; }  #scroller_shadow_tile {     /* sufficiently large, make unreasonably wide if width of parent dynamic. */     width: 9999px;     height: 100%; }  #scroller_shadow_tile img {     height: 100%;     float: left;     width: auto; } 

anyways, idea create stretch effect images.

jsfiddle.