CODEWITHSUNDEEP
css
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Is there anyway to inversly repeat the background-image?

Suppose I've the background like this:

enter image description here

And the normal repeated background look like this:

enter image description here

Now I want the inversely repeated of background-image should look like this:

enter image description here

And even if possible again repeat inversely like this:

enter image description here

Anyway the third option is unnecessary coz we can make like that by taking repeated image

Upvotes: 6

Views: 7708

Answers (5)

Akhil
Akhil

Reputation: 967

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

Completely packed

Upvotes: 2

nkmol
nkmol

Reputation: 8091

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!

Upvotes: 1

Pebbl
Pebbl

Reputation: 36005

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 :)

Upvotes: 0

Igl3
Igl3

Reputation: 5108

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

The easiest might be for you to edit your picture like this:

enter image description here

and repeat it then.

Upvotes: 1

roo2
roo2

Reputation: 6071

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.

Upvotes: 0

Related Questions