CSS3 gradient and background image combined

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%;
}