CSS - Background gradient and background image sent to bottom

Question

I am trying to set the background with a gradient and an image that is positioned to the bottom of the page. I cant seem to get booth to work. Here is my code:

body{
    /* IE10 Consumer Preview */ 
    background-image: -ms-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

    /* Mozilla Firefox */ 
    background-image: -moz-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

    /* Opera */ 
    background-image: -o-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

    /* Webkit (Safari/Chrome 10) */ 
    background-image: -webkit-gradient(radial, left top, 0, left top, 1012, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));

    /* Webkit (Chrome 11+) */ 
    background-image: -webkit-radial-gradient(left top, circle farthest-corner, #FFFFFF 0%, #00A3EF 100%);

    /* W3C Markup, IE10 Release Preview */ 
    background-image: radial-gradient(circle farthest-corner at left top, #FFFFFF 0%, #00A3EF 100%);

    background-image:url("Water.png");
    background-size: 100%;
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:bottom; 
}

How do I get both?

This image:

on top of this color.

Answer 1

you need to add the url as the first background-image option

background-image:url("water.jpg"), radial-gradient(circle farthest-corner at left top, #FFFFFF 0%, #00A3EF 100%);

here it is in a fiddle.. http://jsfiddle.net/THWLM/