css - Yet another background image with gradient transparency -

i checked many sites regarding topic , found random stuff nothing solid. have checked question been answered in stackoverflow not thing looking for. have altered code of jsfilled mentioned , tried adding background color image suppose transparent http://jsfiddle.net/fvny7/518/ sadly, wasn't thing want seek

    <div class="content"></div>     <div class="fadeaway"></div>   .content{ position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/goldengatebridge-001.jpg/400px-goldengatebridge-001.jpg') no-repeat; background-color:red;}  .fadeaway{         position: absolute; top:0px; left:0px; width:100%; height:100%;         background:transparent;         background: linear-gradient(top, rgba( 255, 255, 255, 255 ) 0%, rgba( 255, 255, 255, 1 ) 100% );         background: -ms-linear-gradient(top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );         background: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );         background: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );         -ms-filter: progid:dximagetransform.microsoft.gradient(startcolorstr=#550000ff, endcolorstr=#550000ff);         filter: progid:dximagetransform.microsoft.gradient(startcolorstr=#00ffffff, endcolorstr=#ffffffff);  } 

i want background image blends background color (gradient starts bottom top of image), in other words, if background of site changes color, transparent gradient takes consideration background color of site, not want manually defined colors gradient starts. hope understood mean. example of jsfiddle provided thing dont want achieve. let picture blend background. hope understood question.

without javascript, recommend using translucent png image. appear blend background.

alternatively, place image @ bottom-level , use rgba colors gradients applied on top of it.