Have Geek Brain

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

So basically we have a background image (red) and we want it to repeat with CSS:

alt text http://img260.imageshack.us/img260/4417/repeat.png

So I don't want it to be repeated from the top and left side.

(sorry i suck in ASCII Art)

+2


a source to share


4 answers


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

Currently only WebKit and KHTML (Konqueror) browsers are supported.

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


That said, while I'm pretty confused as to what you really want, I think you should use multiple elements div

, arranged with CSS as you want, and have different backgrounds for each.

Edit: After seeing your new photo, it seems like my sample is back to what you want. Anyway, my advice is worth it. Why don't you use two elements div

or margin-left

to move the background element you want? Review the structure of your document.

+5


a source


Sure. Just set the property to a background-repeat

value repeat

. I'm sure this is the default.



See here .

+1


a source


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

1 2 3
4 5 6
7 8 9

if so, there is no such CSS rule; you will have to change your markup to accommodate the elements where you want to use backgrounds. z-index

and position:relative

will be useful to you.

+1


a source


No, the directions of "repetition" go both ways: if you repeat to the right, it will repeat to the left. The same goes up and down. Your best bet is to wrap the background in a div of the desired size, but that depends on your exact requirements.

+1


a source






More articles:


All Articles