Is there anyway to inversly repeat the background-image? - css

Question

Suppose I've the background like this:
And the normal repeated background look like this:
Now I want the inversely repeated of background-image should look like this:
And even if possible again repeat inversely like this:
Anyway the third option is unnecessary coz we can make like that by taking repeated image

Answer 1

Try this type of image so u get cross related look like you mentioned on last picture

Answer 2

I don't think there is a proper way with css.
The easiest might be for you to edit your picture like this:
and repeat it then.

Answer 3

It is possible to add multiple background to one div. However there is no background transform property, thus not support the multiple backgrounds.
I'm not sure if this would 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;
}
Where the second background is re-inverted and the first background inverted. Of course you can edit this to your wishes.
jsFiddle 2 backgrounds
Where you can even do this with 3 backgrounds
jsFiddle 3 backgrounds
I hope you can work with this!

Answer 4

it is posible to flip the image once with CSS, However css3 does not support(afaik) doing alternating repeated background image.
You will have to use the second image that you posted as the background. This conatins the whole pattern that you want repeated.

Answer 5

For Firefox only you could 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 that's not really a sane way to approach things :)