Vertical css gradient overlay on background image (no overlay)

Question

I have a background image where the top row of pixels is a solid color (this is a landscape photo). The idea would be to have it at the bottom of the page and then above it a CSS gradient that will stretch from the top of the page, stopping at the height of the image. There are many tutorials that show how to overlay / embed a gradient, but all of them assume that you need a full page gradient or an overlay gradient over the background image.

Now I have:

background: rgba(30, 53, 192, 1);

background: url("myimage.jpg") no-repeat center bottom, -moz-linear-gradient(top, #000 0%, #1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, -webkit-gradient(linear, 0% 0%,0% 100%, from(#000), to(#1E35C0));
background: url("myimage.jpg") no-repeat center bottom, -webkit-linear-gradient(top, #000 0%,#1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, -o-linear-gradient(top, #000 0%,#1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, -ms-linear-gradient(top, #000 0%,#1E35C0 100%);
background: url("myimage.jpg") no-repeat center bottom, linear-gradient(top, #000 0%, #1E35C0 100%);

background-size: contain;

. CSS , , , , . , , , , .

, , , javascript, , CSS.

Answer 1

, 4: 1 (.. 25% ), :

html, body {
  margin: 0;
  height: 100%;
}
body {
  background-color: #ccc;
  background-image: url("http://ima.gs/transparent/000/000/200%C3%9750-200x50.png")
                  , linear-gradient(to top, transparent 25vw, #fff 25vw, #00f 100%);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
}

vw . , , 25% , 25vw, 25vw .

http://jsfiddle.net/8a5L20h4/