custom repeating background image using css

Question

my image is 1. Normal repeat-x is 2.

I need image repeat like this 3.

Answer 1

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

Answer 2

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