CSS3 gradient and background image combined - css

Question

PROBLEM
I am trying to combine the CSS3 gradient feature along with a background-image sized specifically and placed specifically in the div. Strange thing is that the background-size property not only applies the size to the image, but also the gradient. However I need to keep the image 30px and apply the graident all the way. Any help would be welcomed?
Thanks in advance
CSS
.accordian-head {
height: 50px;
padding: 10px 10px;
background: #ADADAD;
background-image: url(../img/plus-icon.png) 97% 50%;
background-position:97% 50%;
background-repeat:no-repeat; /* fallback */
background-size:30px;
background-image: url(../img/plus-icon.png), -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD)); /* Saf4+, Chrome */
background-image: url(../img/plus-icon.png), -webkit-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Chrome 10+, Saf5.1+ */
background-image: url(../img/plus-icon.png), -moz-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* FF3.6+ */
background-image: url(../img/plus-icon.png), -ms-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* IE10 */
background-image: url(../img/plus-icon.png), -o-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Opera 11.10+ */
background-image: url(../img/plus-icon.png), linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* W3C */
}

Answer 1

You have two layers, one for the image and one for the gradient. When you specify one background-size value, it applies to both layers.
To stretch the gradient you need to explicitly give it its own size:
background-size:30px, 100%;

Answer 2

What you could do is use nested divs, and apply the gradient on top.
<div class="gradient">
<div class="image" style="background-image:url(../img/plus-icon.png)">
</div>
</div>
.gradient {
background: -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD));
/* etc */
}
.image {
background-size: 30%;
}