CSS: Is it possible to repeat only part of an image to use it as a background?

Question

i have an image that is a rounded corner rectangle, i use it for the top and bottom part of the background by using:

#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; } 

then i use another 1px height image to repeat vertically to fill the area in-between for this div's background. like this:

#content { /* 760px by 1px */     background: #F7EECF url(images/content_body.png) repeat-y 0 0 scroll; } 

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:

#content { /* 760px by 1px */     background: #F7EECF url(images/content_top_bottom.png) repeat-y 0 -5px scroll; } 

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?

Answer 1

Make the image 2280 x 10 by placing the top, middle and bottom parts beside each other. Then you can repeat the middle part:

#content_top {   background: #F7EECF url(images/content_bg.png) no-repeat 0 0 scroll;   height: 10px; }  #content {   background: #F7EECF url(images/content_bg.png) repeat-y -760px 0 scroll; }  #content_bottom {   background: #F7EECF url(images/content_bg.png) no-repeat -1520px 0 scroll;   height: 10px; }