Multiple background images, gradient and image corresponding to image scale

Question

I have a background consisting of an image and a gradient.

http://codepen.io/anon/pen/RWrKGv

I use the following CSS:

.row {
  display: block;
  width: 50%;
  min-height: 150px;
  min-height: 750px;
  background: -webkit-radial-gradient( 50% 50%, circle farthest-side, rgb(201, 2, 10) 0%, rgb(0, 0, 0) 100%), url("https://dl.dropboxusercontent.com/u/11795964/deer-antlers.jpg");
  background-blend-mode: multiply;
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
}

When you resize the page, the image starts to scale, while the gradient remains the same size. I would like them to scale at the same time so that you don't see how the image is cut out.

Answer 1

, . , , , (, , ) 750 . ( , min-height, ). .

, , background-size contain ( ), , , , , . , ( - 50% ) , .

, , , , () , ( ), () .

, , background-size ( / ).

, , , . , 500 x 750 , 100vh 150vh . , . , , , , .

.row {
  display: block;
  width: 100vh;
  min-height: 150vh;
  background: -webkit-radial-gradient(50% 50%, circle farthest-side, rgb(201, 2, 10) 0%, rgb(0, 0, 0) 100%), url("http://lorempixel.com/500/750/nature/1");
  background: radial-gradient(circle farthest-side at 50% 50%, rgb(201, 2, 10) 0%, rgb(0, 0, 0) 100%), url("http://lorempixel.com/500/750/nature/1");
  background-blend-mode: multiply;
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="row">
</div>

Hide result

Answer 2

- , , . , bg, , , . :

@media only screen and (max-width: 500px) {
  .row{
   height:225px;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>