title: CSS3 multiple backgrounds, one repeating in ul
body: <p>I am working on a Wordpress template. I am trying to implement 3 background images to be used for each <code>&lt;li&gt;</code> in the nav menu, which is generated dynamically. Take a look at the two examples.</p>
  
  <p><a href="http://preahkumpii.com/misc/test01/hi.html" rel="nofollow">http://preahkumpii.com/misc/test01/hi.html</a><br>
  <a href="http://preahkumpii.com/misc/test02/hi.html" rel="nofollow">http://preahkumpii.com/misc/test02/hi.html</a></p>
  
  <p>First Example CSS:</p>
  
  <pre><code>.menu-item li {
    background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
    background-position: left, right, center;
    background-repeat: no-repeat, no-repeat, no-repeat;
  }
  </code></pre>
  
  <p>Second Example CSS:</p>
  
  <pre><code>.menu-item li {
    background-image: url(images/menu-left.png), url(images/menu-right.png), url(images/menu-center.png);
    background-position: left, right, center;
    background-repeat: no-repeat, no-repeat, repeat-x;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul class="menu-item"&gt;
    &lt;li&gt;ItemNumber1&lt;/li&gt;
    &lt;li&gt;ItemNumber2&lt;/li&gt;
    &lt;li&gt;ItemNumber3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I want the two outer bg images to stay where there are with no repeat. But, I want the middle bg image to repeat along the x-axis, <em>but only extend to the other bg images</em>. As you can see in the second example, when the middle image is given <code>repeat-x</code> it extends across the entire <code>&lt;li&gt;</code>. As far as I know, I cannot use <code>&lt;div&gt;</code> to make this happen because the text for the menu is generated on the fly. So, I assume I must have <em>only</em> a <code>&lt;ul&gt;</code> without a bunch of <code>&lt;div&gt;</code>s hanging around. Any help?</p>