custom repeating background image using css

my image is 1. Normal repeat-x 开发者_如何转开发is 2.

I need image repeat like this 3.

---

You can't do that with CSS. What you can do, however, is grab your favorite graphics editing program, and make this instead:

Use this with repeat-x to get what you want. See: http://www.jsfiddle.net/aPQHe/1

---

Merge part 1 & 2 of your image 3 and set it as the image to be repeated.