css3 background gradient full width with scaled image - css

Question

Is there a way to set the size of the image independent from the general size of the background with css?
With following code I set the size of the of the background, so the gradient and the image have the width of 30px.
background(url("../images/icons/double_arrow_37px.svg"), linear-gradient(to top bottom, rgb(171, 129, 85), rgb(148, 112, 74)));
background-size: 30px 37px;
What I need is to set the width of the image to 30px and the gradient to a width of 100% of the button.
I already know the workaround to create a extra image with the correct dimensions, but maybe there is a smarter way with css?
Full Example:
body {
background-color: #000;
}
.button-custom {
color: #fff;
font-family: $font-centennial;
background-image: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg");
background-size: 30px 37px;
background-position: center left;
background-repeat: no-repeat;
margin-top: 70px;
padding: 15px 45px;
border-radius: 0;
border: 0;
text-transform: uppercase;
overflow: hidden;
}
.button-custom.bronze {
background-color: #ab8155;
}
.button-custom.bronze:hover {
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), -moz-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), -webkit-linear-gradient(bottom, #ab8155, #94704a);
background: url("http://metk.de/kunden/stackoverflow/double_arrow_37px.svg"), linear-gradient(to top bottom, #ab8155, #94704a);
background-position: center left;
background-size: 30px 37px;
background-position: center left;
background-repeat: no-repeat;
color: #fff;
}
Contact

Answer 1

In CSS3, you can use multiple images background. linear-background is interpreted as an image not a color. Known that, you can write something like that :
body {
height: 600px; /* not relevant for your problem */
width: 600px;
}
div {
height: 500px; /* not relevant for your problem */
width: 500px; /* not relevant for your problem */
border: 3px dashed green; /* not relevant for your problem */
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -moz-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, red), color-stop(100%, blue));
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -webkit-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -o-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), -ms-linear-gradient(top, red 0%, blue 100%);
background: url("http://i436.photobucket.com/albums/qq90/KatDJZ/Forums/18556-Robot_Unicorn_Attack.jpg"), linear-gradient(to bottom, red 0%, blue 100%);
background-position: 50% 50%, 50% 50%;
background-repeat: no-repeat, no-repeat;
background-size: 150px, 300px;
}
<div>Yo!</div>