Multiple Backgrounds in Multiple Selectors

Question

I'm trying to create a CSS3 button which includes an image using multiple background. I want to use the same basic style (based on Twitter's BootStrap CSS framework), but apply a different image by adding a class.

I want a gradient as the base, then to add an image by tagging on an extra class. I can do this for one button by extending the btn css class in bootstrap like this:

.btn.btnEdit 
{
    padding-left: 25px;
    background-color: #e6e6e6;
    background-repeat: no-repeat, no-repeat;
    background-position: 5px center, center center;
    background-image: url(/images/edit_16.png), -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
    background-image: url(/images/edit_16.png), -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
    background-image: url(/images/edit_16.png), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
}
.btn.btnEdit:hover {
  background-position: 5px center, 0 -15px;
}

But ideally I'd like to remove boilerplate CSS and just specify the extra background again (just background-image: url(/images/edit_16.png), linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); or something similar). Is there a way I can specify additional backgrounds by cascading?

This is ASP.NET so I can't use sliding doors without a control adapter, which I don't want.

Do you mean without the vendor prefixes, or without the `url(/images/edit_16.png)`? — BoltClock, Oct 14 '11 at 22:05

score 1 · Accepted Answer · answered Oct 15 '11 at 03:00

1

separate the background-image and the background color. something like this:

background-image: url(/images/edit_16.png);
background-color:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);

do this for every css3 gradient syntax.

answered Oct 15 '11 at 03:00

rizqyhi

70
1
8

Excellent, thanks. If you use this with Bootstrap though, you need to add `filter: none` to your declaration to make the image work in IE. – Echilon Oct 15 '11 at 16:58

Multiple Backgrounds in Multiple Selectors

1 Answers1