title: Using before and after pseudo-elements on background image
body: <p>I am wanting to construct navigation items from three (background) images, with the first and last a fixed width, and the central a variable width, depending on the width of the text in the nav item.  I have been led to believe that using the pseudo elements before and after would be the best method.  When I try this though, the main (central) background image for the nav item is overlapping with the before and after background images.</p>
  
  <p>You can see what I mean on <a href="http://soteriabrighton.co.uk/test2/test3.html" rel="nofollow">this page</a>.</p>
  
  <p><strong>Here is the CSS:</strong></p>
  
  <pre><code>.box {
     background-image: url(nav/images/nav_02.png);
     background-repeat: repeat;
     height:20px;
     position: absolute;
     padding: 10px 13px;
  }
  
  
  .box:before {
      left: 0;
      background-image: url(nav/images/nav_01.png);
  }
  
  .box:after {
      right: 0;
      background-image: url(nav/images/nav_03.png);
  }
  
  .box:before,
  .box:after {
      content: ' ';
      width: 13px;
      height:40px;
      position: absolute;
      top: 0;
      background-repeat: no-repeat
  }
  </code></pre>
  
  <p><strong>And the HTML:</strong></p>
  
  <pre><code>&lt;div class="box"&gt;here is some text&lt;/div&gt;
  </code></pre>
  
  <p>Can I use background-images in this way using pseudo elements?</p>
  
  <p>Thanks,</p>
  
  <p>Nick</p>