Is there in any case a reverse repetition of the background image?

Question

Suppose I have this background:

And the usual repeating background looks like this:

Now I want the reverse repeated background image to look like this:

And even if it is possible, repeat again like this:

---

In any case, the third option is not needed, because we can do this by making a second image

Answer 1

Try this type of image, so you get a cross-view similar to the previous image.

Answer 2

I don't think there is a proper way with css.

The easiest way is to edit your image as follows:

and repeat it.

Answer 3

You can add multiple backgrounds in one div. However, there is no background conversion property, so multiple backgrounds are not supported.

---

I'm not sure if this will work for you, but you can use :after psuedo-class for this:

 div { width: 400px; height: 200px; background: url('http://placehold.it/400x200'); background-repeat: no-repeat; position: relative; -webkit-transform: scaleY(-1); transform: scaleY(-1); } div:after { content: ''; display: block; position: absolute; width: 400px; height: 200px; background: url('http://placehold.it/400x200'); background-repeat: no-repeat; -webkit-transform: scaleY(-1); transform: scaleY(-1); top: -200px; } 

If the second background is re-inverted and the first background is inverted. Of course, you can edit this as you wish.

jsFiddle 2 backgrounds

If you can even do it with three backgrounds

jsFiddle 3 backgrounds

---

Hope you can handle it!

Answer 4

maybe click an image once using CSS . However, css3 does not support (afaik) performing alternating repeated background images.

You will need to use the second image that you placed as the background. This encodes the entire pattern that you want to repeat.

Answer 5

For Firefox only, you can use -moz-element

  <div class="repeated-background"></div> <div id="mybackground"> <img src="myimage.png" /> <img src="myimage.png" class="vflip" /> </div> 

CSS

 .repeated-background { background: -moz-element(#mybackground) repeat; } .vflip { -moz-transform: scaleY(-1); -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1); } 

But this is not the most sensible way to get closer to things :)