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

Spread the love

Question Description

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?

Practice As Follows

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