Can multiple background images alternate when repeated?

I am trying to alternately tile multiple backgrounds images using CSS. Here is the essence of what I am trying, with two small square images X and O:

background-image: url(images/X.png), url(images/O.png);
background-repeat: repeat-x, repeat-x;

This is the desired effect (spacing added for clarity):

XXX OOO XXX OOO XXX OOO
XXX OOO XXX OOO XXX OOO

But this is the actual effect:

XXX XXX XXX XXX XXX XXX
XXX XXX XXX XXX XXX XXX

The foremost background开发者_如何学JAVA layer, X, seems to be repeated adjacent to itself, which is causing the secondary background layer, Y to be drawn behind and thus hidden.

Can multiple background images be alternately tiled? I would prefer not to combine the images as a single image. I also don't know how wide the element will be, so faking the repeat by specifying the same image more than once is not possible.

---

What you could try is make both the images twice as wide and on either left or right side a transparent image. Haven't tried it, but should work and maybe not the beautiful solution you were looking for?

Also, not sure why you don't want to repeat 1 combined image of XXX 000?