title: using background image for headers
body: <p>I have got an image which i have to used for my headers , I cant use fixed image as the header width changes depending on the header text, therefore i did 3 slices of an image , starting which wont repeat , middle slice which will repeat with the text and end slice image which should close the header, i have included the image , and the css which i am using , the end slice doesnt works , can anyone tell me what i am doing wrong :</p>
  
  <pre><code>&lt;div class="product-item"&gt;
  &lt;div class="product-title"&gt;
  
  &lt;span&gt;&lt;h3&gt;@Model.Name&lt;/h3&gt;&lt;/span&gt;
  
  &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.product-grid .product-item .product-title
  {
  background-image: url('images/first-slice.png');
  background-repeat: no-repeat;
  background-position: 0% 0%;
  height:37px;
   }
  .product-grid .product-item .product-title span
  {
  background-image: url('images/last-slice.png');
  background-repeat: no-repeat;
  background-position: 100% 50%;
   height:37px;
   }
  
  .product-grid .product-item .product-title h3
  {
  background-position: 50%;
  background-image: url('images/middle-slice.png');
  background-repeat: repeat-x;
   height:37px;
   margin-left:5px;
   }
  </code></pre>
  
  <p>Live test Website:<a href="http://www.teamlemon.co.uk/c/14/cholera-toxins" rel="nofollow noreferrer">Website</a></p>
  
  <p>First Image: <img src="https://i.stack.imgur.com/n9JQW.png" alt="First-slice">
  middle Image : <img src="https://i.stack.imgur.com/Qy586.png" alt="enter image description here">
  End Slice : <img src="https://i.stack.imgur.com/qNx6Y.png" alt="enter image description here"></p>