title: multiple background css3: 2 repeated-x images, each taken up half of the container
body: <p>I have this:
  <a href="http://jsfiddle.net/MAJZz/" rel="nofollow">http://jsfiddle.net/MAJZz/</a></p>
  
  <p>what i want is that the red fish to stop at the half of the container, and the green fish to start from there until the end.
  in other words, the red fish should cover (from 0 to 50% horizontally) and the green fish should cover (from 50% onward to 100% - same, horizontally).</p>
  
  <p>here is my html:</p>
  
  <pre><code>&lt;div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>and this is my CSS:</p>
  
  <pre><code>div {
      background: url(http://a0.twimg.com/profile_images/88812997/Redfish_facebook_normal.jpg) repeat-x, url(http://icons.iconarchive.com/icons/fasticon/fish-toys/16/Green-Fish-icon.png) repeat-x;
      position: absolute;
      top: 10px;
      left: 10px;
      width: 500px;
      height: 100px;
  }
  </code></pre>
  
  <p>is it possible ?</p>
  
  <p>thank you in advance.</p>