title: Multiple background-images and a background-color
body: <p>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?</p>
  
  <p>I can use multiple background images:</p>
  
  <pre class="lang-css prettyprint-override"><code>div.arrow{
      background: url('arrowtail.png') left no-repeat, url('arrowhead.png') right no-repeat;
  }
  </code></pre>
  
  <p>The html:</p>
  
  <pre><code>&lt;div class="arrow"&gt;This text is on a transparent background&lt;/div&gt;
  </code></pre>
  
  <p>This gives me an <code>div</code> with an arrow-head and tail, and a transparent middle-section.
  It does not seem possible specify the color to the middle section.</p>
  
  <p>With only one background-image, you could do this:</p>
  
  <pre class="lang-css prettyprint-override"><code>div.arrow{ background: red url('some_image.png') no-repeat; }
  </code></pre>
  
  <p>I know this is doable in lots of ways, but is the background-color property really lost from the shorthand definition?</p>