Multiple background-images and a background-color

Question

Suppose I want to render an arrow in CSS, which should have a head, a tail and flexible width so it can contain text. I can of course create multiple divs to get what I want, but how can this be done in CSS3?

I can use multiple background images:

div.arrow{
    background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
}

The html:

<div class="arrow">This text is on a transparent background</div>

This gives me an div with an arrow-head and tail, and a transparent middle-section. It does not seem possible specify the color to the middle section.

With only one background-image, you could do this:

div.arrow{ background: red url('some_image.png') no-repeat; }

I know this is doable in lots of ways, but is the background-color property really lost from the shorthand definition?

Thermion

Answer 1

No, it's not exactly lost from the shorthand declaration. You can still specify the background color, but only for the last (middle) layer (regardless of whether you put an image there):

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat, 
                red;
}

Note that for your scenario, your images may have to have completely opaque backgrounds. The background color will show under any transparent pixels of your images.

jsFiddle demo

---

Declaring background-color separately, however, may be much better for your scenario as it lets you use different colors based on the same background images (if you're good with transparent pixels on the parts of your images to be filled with the CSS background color):

div.arrow {
    background: url('arrowtail.png') left no-repeat, 
                url('arrowhead.png') right no-repeat;
}

/* Assuming your red arrow has this ID */
#red {
    background-color: red;
}

jsFiddle demo

Parrakeet

That's pretty cool. It works in IE9 but not IE9 in 'compatibility' mode. – Compiler

@Steve Wellens: Because IE9 compatibility mode doesn't use the IE9 rendering engine. I can't remember if it's 7 or 8. – Parrakeet

Ahh thanks. The problem was the non-opaque background-images. Of course, the background-color will fill the transparent areas, making it seem like it just overwrites the bgs! – Thermion

Answer 2

I find using multiple background images to be problematic for things like this. Have you considered using the :before and :after pseudo elements? I wrote up a quick example:

<style>
    .arrow { display:block; margin:0; padding:0; width:200px; height:45px; line-height:45px; text-align:center; background:#ddd; }
    .arrow:before { float:left; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
    .arrow:after { float:right; display:block; margin:0; padding:0; width:25px; height:45px; background:#ccc; content:''; }
</style>

<div class="arrow">This text is on a transparent background</div>

Just replace the background color in the :before and :after declarations to the arrow images you want.

Azygous

Actually, I didnt think of this. Nice solution! – Thermion

@Frederik: And it's a little bit better in the compatibility field :) – Parrakeet

yeah, I know :) I'm just messing around with css3 a bit, to test stuff. But yeah, still way to unsupported to rely on it in a real project. – Thermion

Answer 3

I was able to add multiple background-images and background-color like this:

background: url(../images/vis.png) no-repeat right, url(../images/vis.png) no-repeat left #fff;

Toxicology