1

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 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.

Nathan Ryan
  • 12,893
  • 4
  • 26
  • 37

1 Answers1

0

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?

mathijsbrand
  • 413
  • 2
  • 16
  • I would rather not modify the images in any way. They are effectively a stand-in, and may be replaced with other backgrounds, such as gradients. – Nathan Ryan Jun 02 '11 at 22:36
  • Okay, I've done a bit of digging around and I'm afraid I don't see an easy solution to your problem using one element. I think you're best off creating a (javascript) grid and have a background image for each element. – mathijsbrand Jun 03 '11 at 01:40
  • I ended up doing it in JavaScript, though I think this will eventually be possible using only CSS. It could be done with a dummy element that effectively combines the images as its background, then using the (now mostly unsupported) element(#dummy) function as the background with a repeat. Seems like there should be a simpler solution, though, probably an opportunity for a `background-padding` property or similar. – Nathan Ryan Jun 03 '11 at 11:00
  • Great. If you want to propose/discuss anything in Style/CSS, I think this is the mailinglist for it: http://lists.w3.org/Archives/Public/www-style/. More general information about participating: http://www.w3.org/participate/ – mathijsbrand Jun 03 '11 at 11:12
  • Been subscribed to the mailing list for a while. :-) – Nathan Ryan Jun 03 '11 at 14:10