Create gradient overlay on background image with dynamic height

I want to create black gradient overlay on background image. But I have a problem. Background image always random and responsive ready (width:100%; height:100%; background-size:100%;). So I can`t just put gradient to bottom with fixed height. Is it possible to do that with css or jquery? Thanks!

My HTML: http://ift.tt/1DvE9Vg

<div style="background:url(http://ift.tt/1L0Lblo) #000 no-repeat top center; width:100%; height:100%; background-size:100%; position: absolute; top: 0; left:0; z-index:1; "> </div>

http://pbrd.co/1v1cavd - screenshot of what I need to do