title: How to give left and right padding/margin to repeated background in css3 multiple background?
body: <p>What I want to do is exactly the same like in this article</p>
  
  <p><a href="http://css-tricks.com/css3-multiple-backgrounds-obsoletes-sliding-doors/" rel="nofollow">http://css-tricks.com/css3-multiple-backgrounds-obsoletes-sliding-doors/</a></p>
  
  <p>But in my case the left and right image is transparent. so repeated background is repeating in whole element. Is there any way to give right and left space?</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;ul&gt;
      &lt;li class="expanding"&gt;Went To The Market&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>li.expanding {
      background: url('left.jpg') top left no-repeat,
          url('right.jpg') top right no-repeat,
          url('middle.jpg') top center repeat-x;
      height: 40px;
      padding-top: 12px;
      padding-left: 12px;
      padding-right: 20px;
      float: left;
  }
  </code></pre>
  
  <p>See live example here: <a href="http://css-tricks.com/examples/CSS3-Expanding-Menu/" rel="nofollow">http://css-tricks.com/examples/CSS3-Expanding-Menu/</a></p>