title: CSS: Is it possible to repeat only part of an image to use it as a background?
body: <p>i have an image that is a rounded corner rectangle, i use it for the top and bottom part of the background by using:</p>
  
  <pre><code>#content_top { /* 760px by 30px */
      background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 0 scroll;
      height: 10px;
  }
  
  #content_bottom { /* 760px by 30px */
      background: #F7EECF url(images/content_top_bottom_bg.png) no-repeat 0 -20px scroll;
      height: 10px;
  }
  </code></pre>
  
  <p>then i use another 1px height image to repeat vertically to fill the area in-between for this div's background. like this:</p>
  
  <pre><code>#content { /* 760px by 1px */
      background: #F7EECF url(images/content_body.png) repeat-y 0 0 scroll;
  }
  </code></pre>
  
  <p>now i wonder is it possible to just use the same image (content_top_bottom.png), but only part of it, to achieve the same effect? i tried something like this, but it didn't work:</p>
  
  <pre><code>#content { /* 760px by 1px */
      background: #F7EECF url(images/content_top_bottom.png) repeat-y 0 -5px scroll;
  }
  </code></pre>
  
  <p>i want to use the same image because i want to reduce the number of http request. the 1px image is probably not gonna have a great impact, but i just want to try. anyone can help?</p>