6

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

Bhojendra Rauniyar
  • 83,432
  • 35
  • 168
  • 231
  • I'd have to say no (I'm not aware of anything), but you could just store the background with it's v-flipped counterpart and repeat that. It doubles the payload of the image though of course.. It would be a nice CSS background feature to have imo... more abilities with background images would be always welcome :) – Pebbl Dec 03 '13 at 09:03

5 Answers5

2

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

Completely packed

Akhil
  • 967
  • 1
  • 7
  • 14
1

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.

Igl3
  • 4,900
  • 5
  • 35
  • 69
  • Yes of-course I can do like that but what if the height of image is too large? I've to copy too long image and apply... – Bhojendra Rauniyar Dec 03 '13 at 09:06
  • How do you mean to large? To large for what? – Igl3 Dec 03 '13 at 09:08
  • Yes, but what problem exactly does this cause for you if the image is twice as high as before? – Igl3 Dec 03 '13 at 09:11
  • Well if the original image is 1000px in height then repeating it results in 2000px high image which is actually 2 times bigger in download size as well. This is not optimal in any way. – Tomas M Feb 15 '15 at 13:11
1

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!

Community
  • 1
  • 1
nkmol
  • 8,025
  • 3
  • 30
  • 51
0

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.

Community
  • 1
  • 1
actual_kangaroo
  • 5,971
  • 2
  • 31
  • 45
0

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

Pebbl
  • 34,937
  • 6
  • 62
  • 64