background gradient color and background image

Question

I've defined this class which adds a gradient background colour:

.banner {
    background: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D;
}

I've also defined a class that adds a background image

.alertBell {
    background-image: url("../images/icons/bell.png");
    background-position: 5px 50%;
    background-repeat: no-repeat;
    padding-left: 30px;
}

If I add both these classes to an element, it seems one overrides the other

<h2 class="banner alertBell"></h2>

Is there any way that I can have a background colour and a background image?

Answer 1

you can use CSS3 multiple backgrounds, something like

.banner.alertBell {
    background-color:#9FCC1D;
    background-image:url("../images/icons/bell.png"),
        -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%);
    background-repeat:no-repeat, repeat;
    background-position:5px 50%, 0 0;
}

example jsfiddle

see also: How do I combine a background-image and CSS3 gradient on the same element?

Answer 2

The Background css property is actually a combination of background-color, background-image, background-repeat, background-attachment and background-position into one property. Therefore when you set your H2's class property to class="banner alertBell", alertBell class will overwrite any shared properties contained in the banner class.

You could try changing your banner class to:

.banner {
    background-color: -moz-linear-gradient(center top , #75A319 0%, #9FCC1D 100%) repeat scroll 0 0 #9FCC1D;
}

Answer 3

You could do something like:

<div class="banner">
  <h2 class="alertBell"></h2>
</div>

Answer 4

You're having that problem because CSS gradients are defined as background-image, not background-color.

So depending on which one is defined later in the CSS, the background-image will be either .banner or .alertBell