title: Button using three (3) background images css
body: <p>I'm trying to make a button using three background images so that we can pull in translations for the the text of the button and expand nicely. We'll probably add a base style for IE8 but our designer wants us to use this style and we couldn't recreate it nicely with pure CSS3.</p>
  
  <p>Here are the images:<br>
  <img src="https://i.stack.imgur.com/6m2HC.png" alt="Button front end">
  <img src="https://i.stack.imgur.com/DaQcG.png" alt="Tiny middle piece to repeat">
  <img src="https://i.stack.imgur.com/2WA5B.png" alt="Button rounded end piece"></p>
  
  <p>Here's the HTML (just a simple button, but thought I should put it anyway:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;button class="back clickable" aria-label="Back" onclick="javascript:history.back();"&gt;Back&lt;/button&gt;
  </code></pre>
  
  <p>I've already tried a couple of things; I'll paste the CSS of both attempts.</p>
  
  <p>Attempt 1: Using Pseudo-selectors<br>
  <a href="http://jsfiddle.net/c2B6X/" rel="nofollow noreferrer">http://jsfiddle.net/c2B6X/</a></p>
  
  <pre class="lang-css prettyprint-override"><code>.back {
      background: url("images/back-middle.png") 14px 0 repeat-x;
      color: $white;
      height: 28px;
      padding: 5px;
      &amp;:before {
          background: url("images/back-front.png") 0 0 no-repeat;
          width: 14px;
      }
      &amp;:after {
          background: url("images/back-end.png") 100% 0 no-repeat;
          width: 8px;
      }
  }
  </code></pre>
  
  <p>Attempt 2: Three <code>background-image</code>s<br>
  <a href="http://jsfiddle.net/nPUQN/" rel="nofollow noreferrer">http://jsfiddle.net/nPUQN/</a></p>
  
  <pre class="lang-css prettyprint-override"><code>.back {
      background: none;
      background-image: url("images/back-middle.png"), url("images/back-end.png"), url("images/back-front.png");
      background-position: 14px 0, 100% 0, 0 0;
      background-repeat: repeat-x, no-repeat, no-repeat;
      border-right: 8px transparent;
      border-left: 14px transparent;
      color: $white;
      height: 28px;
      padding: 5px;
  </code></pre>
  
  <p>}</p>
  
  <p>If it looks like atypical CSS that's because we're using SASS.</p>
  
  <p>Is there something obvious I'm missing or doing wrong? Any advice on how to make this work would be greatly appreciated.</p>
  
  <p><strong>EDIT</strong><br>
  Since I got so many answers that "work", I'll mark correct the answer that works best in Chrome, FF and IE9.</p>
  
  <p><strong>EDIT 2</strong><br>
  I've tried all answers and none work in IE9. We have to support IE9 (and IE8, but I won't even go there for now). I'm going to start a bounty. Anyone who can supply an answer that works for IE9, Firefox and Chrome gets it.</p>