Is it possible to make a background image repeat vertically. But, also horizontally only to the right side using CSS?

Question

So basically we have an background image (red) and we want it to repeat as the following with CSS:

So I don't want it to repeat to the upper and left side.

(sorry I suck at ASCII Art)

Answer 1

Sure. Just set the background-repeat property to repeat. I'm pretty sure this is the default value.

See here.

Answer 2

I'm assuming you want images in positions 1, 2, 3, 4, and 7 (and so on), right?

1 2 3
4 5 6
7 8 9

if so, no such CSS rule exists; you'll have to alter your markup to place elements where you want the backgrounds. z-index and position:relative will be useful to you there.

Answer 3

No, "repeat" directions go both ways: if you repeat to the right, it will repeat to the left as well. Same with up and down. Your best bet is to wrap the background in a div of the proper size, but it depends on your exact requirements.

Answer 4

If I understand you correctly, you want only to repeat one row and one column of the image. This can be accomplished with CSS3 Multiple Backgrounds.

Currently only WebKit-based and KHTML (Konqueror) browsers support this.

 body {
      background: url(myimage.png) top left repeat-x, 
                  url(myimage.png) top left repeat-y;
 }

That said, although I'm quite confused about what you really want, I think you should be using multiple div elements arranged by css positioning the way you want and have different backgrounds on each.

Edit: Seeing your new photo it seems my sample is backwards to what you want. Anyway, my advice stands. Why aren't you using two div elements or a margin-left to move your desired background element over? Rethink the structure of your document.