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 */
}

BoltClock · Accepted Answer · 2013-11-22 12:52:47Z

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

answered Nov 22, 2013 at 12:52

BoltClock

728k165 gold badges1.4k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BhikhaM Over a year ago

Thanks pal! Worked a treat!

Rogue · Accepted Answer · 2013-11-22 12:49:58Z

0

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

answered Nov 22, 2013 at 12:49

Rogue

11.5k6 gold badges51 silver badges74 bronze badges

Collectives™ on Stack Overflow

CSS3 gradient and background image combined

PROBLEM

CSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

PROBLEM

CSS

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related