CSS - Transparency Gradient on an Image - css

Question

I would like my background image to go from 100% opacity to 0% opacity. I could choose to use another image asset where I use an image editor to make the image fade opacity, however I want to use as little assets as possible. Can this be done with CSS? I know I could make several divs in which I change the opacity on each one, however this would require a lot of divs to make it look good.
This is what my code currently looks like with the solution I don't want to use:
<div class="contentFadeAway" id="cfa1"></div>
<div class="contentFadeAway" id="cfa2"></div>
<div class="contentFadeAway" id="cfa3"></div>
<div class="contentFadeAway" id="cfa4"></div>
<div class="contentFadeAway" id="cfa5"></div>
<div class="contentFadeAway" id="cfa6"></div>
<div class="contentFadeAway" id="cfa7"></div>
<div class="contentFadeAway" id="cfa8"></div>
<div class="contentFadeAway" id="cfa9"></div>
<div class="contentFadeAway" id="cfa10"></div>
And the CSS:
.contentFadeAway {
display: block;
position: fixed;
top: 160px;
padding: 0px;
width: 100%;
height: 5px;
background: url('/assets/shapeimage_3_int.png') fixed;
background-size:cover;
z-index: +1;
}
#cfa1 { top: 160px; opacity: 1; }
#cfa2 { top: 165px; opacity: .9; }
#cfa3 { top: 170px; opacity: .8; }
#cfa4 { top: 175px; opacity: .7; }
#cfa5 { top: 180px; opacity: .6; }
#cfa6 { top: 185px; opacity: .5; }
#cfa7 { top: 190px; opacity: .4; }
#cfa8 { top: 195px; opacity: .3; }
#cfa9 { top: 200px; opacity: .2; }
#cfa10 { top: 205px; opacity: .1; }
For those that don't understand what that code is doing it is here: http://jsfiddle.net/FVNY7/2/ I have a background image, and I want the content to fade away when it scrolls up, so I would have the same image with an opacity from 1 to 0 to give that effect. If the background was a solid color I could just use a rgba gradient, but its an image.

Answer 1

For the most cross-browser support, set your background image in your div. Then overlay another div with a semi-transparent gradient background on top of it.
HTML:
<div class="content"></div>
<div class="FadeAway"></div>
CSS:
.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; }
.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: -moz-linear-gradient(top, rgba( 255, 255, 255, 0) 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);
}
Here's a fiddle of the above example: http://jsfiddle.net/FVNY7/

Answer 2

Although it may not be the best implementation and there could be a better way the best way I have found is the down and dirty implementation that I mentioned in my question. Using PHP code it can be more refined and look good. Here is the code:
<style>
.contentFadeAway {
display: block;
position: fixed;
top: 160px;
padding: 0px;
width: 100%;
height: 1px;
background: url('/assets/shapeimage_3_int.png') fixed;
background-size:cover;
z-index: +1;
}
</style>
<?php
for ($int = "1"; $int <= "50"; $int++) {
echo "<div class=\"contentFadeAway\" style=\"top: " . (160 + 1 * $int) . "px; opacity: " . (1 - .02 * $int) . ";\"></div>\";
";
}
?>

Answer 3

My solution to my problem is to simply state that this is not possible with the current technology. An alternative option would be to use a simple transparency gradient. Until A better solution arrises this is what I will end up doing.
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);