CSS Opacity Fade - html

Question

I'm trying to take this as a CSS background on a div, but I'd like to have the image start fading in to the background at around 200px like this (black background used for example). Is there a CSS only method of doing this?
I plan on wrapping this project in NodeWebkit, so as long as it works in Chrome I'm not worried about other browsers.
Thanks in advance!
HTML:
<div class="profileBox">
...
</div>
CSS:
.profileBox {
background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
background-repeat: no-repeat;
width: 300px;
}

Answer 1

Try this solution, no modification of your HTML is required and not JS.
Basically you can create your gradient using -webkit-linear-gradient adding property url for your image.
http://jsfiddle.net/0kj8t1zq/6/
<div class="profileBox"></div>
.profileBox {
position: absolute;
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(59%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65))), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
s-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 59%, rgba(0, 0, 0, 0.65) 100%), url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg') no-repeat;
width: 308px;

Answer 2

You have already answers to fade it to black.
If you want to fade it to transparent, you need masking. It doesn't have much support, but it works in Chrome
.profileBox {
background-image: url('http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg');
background-repeat: no-repeat;
width: 300px;
height: 400px;
-webkit-mask-image: linear-gradient(0deg, transparent 100px, black 200px);
border: solid 2px white;
}
body {
background-color: blue;
}
<div class="profileBox"></div>
Changed body background to blue to see it is really transparent

Answer 3

For the fade effect, you can use rgba in webkit-gradient.
To get an image AND a gradient as background you can play with opacity. But there is no CSS property background-opacity, so you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it (source).
.profileBox {
width: 300px;
height: 300px;
display: block;
position: relative;
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 1)), to(rgba(255, 255, 255, 0))); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* FF3.6+ */
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* IE10 */
background-image: -o-linear-gradient(top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* Opera 11.10+ */
background-image: linear-gradient(top bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)); /* W3C */
}
.profileBox::after {
content: "";
opacity: 0.5;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
background-repeat: no-repeat;
background-image: url(http://ddragon.leagueoflegends.com/cdn/img/champion/loading/Morgana_6.jpg);
}
<div class="profileBox">
</div>