CSS - size only the background image, not the gradient

Question

I have got followng CSS code:

.window-close {
    margin-right: 3px;
    background: rgba(234, 145, 116, 1);
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -moz-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -webkit-gradient(left top, left bottom, color-stop(0%, rgba(234, 145, 116, 1)), color-stop(100%, rgba(205, 74, 30, 1)));
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -webkit-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -o-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -ms-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
    background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), linear-gradient(to bottom, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
    background-repeat: no-repeat;
    display: inline-block;
    height: 15px;
    width: 15px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;

}

I want to scale the image with this:

background-size: 50% auto;

But it scales the gradient, not the image and I don't want such a thing.

FIDDLE: http://jsfiddle.net/mvw4vh9t/

Answer 1

Comma Separate the background-size values

background-size: 50% auto, cover;

.window-close {
  margin-right: 3px;
  background: rgba(234, 145, 116, 1);
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -moz-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -webkit-gradient(left top, left bottom, color-stop(0%, rgba(234, 145, 116, 1)), color-stop(100%, rgba(205, 74, 30, 1)));
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -webkit-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -o-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), -ms-linear-gradient(top, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
  background: url(http://obrazki.elektroda.pl/8243166200_1420736650.png), linear-gradient(to bottom, rgba(234, 145, 116, 1) 0%, rgba(205, 74, 30, 1) 100%);
  background-repeat: no-repeat;
  display: inline-block;
  height: 15px;
  width: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
  background-size: 50% auto, cover;
}

<div class="window-close"></div>