Question

I’m trying to do something like this:

.box {
    background-image: url(../img/box.png);
    background-position: 0 0;
    background-repeat: no-repeat;
    display: block;
    height: 64px;
    margin: 90px auto;
    overflow: hidden;
    width: 831px;
}

.shadow_1 {
    background-image: url(../img/shadow_1.png);
    background-position: 0 100%; 
    background-repeat: no-repeat;
    padding-bottom: 31px;
}

And in HTML:

<div class="box shadow_1"></div>

I’d like to combine two classes with two different images, but have the image in the second class override the first one. Is it even possible, or I have to use two divs?

Answer 1

The latest loaded styles will overwrite previously loaded styles. So in your case. Any styles in .box will be overwritten by style .shadow_1 in your implementation.

You are correct in your assuming you will need another div to handle this.