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

Answer 2

I would suggest using 3 images, across the site:

1. Standard non-repeating sprites. This would be the content_top_bottom.png in your case (though it may be better to rename it so it's more generic and can be used for other parts).
2. A "repeat-x" image. This would be an image 1px wide (or a little more, depending on the design) but very tall. In this you'd put all images that repeat horizontally.
3. A "repeat-y" image, similar to #2 except 1px tall and very wide. Here you would put your content_body.png image.

Although in your current case this results in 2 HTTP requests, it's a lot more scalable because you won't use more than 3. Unfortunately for backgrounds that tile both directions, they have to be individual.

You may also be interested to read about the CSS3 property, border-image, which will allow you to use one image for a complete element. It's not well supported yet but hopefully it won't be too long!