1

Let's say I have a large background image:

enter image description here

I would like to repeat it vertically with every other image reflected:

enter image description here

I could use a doubled image and just repeat it, but of course it would significantly affect performance.

Is it possible to do this with single image and pure CSS? (Maybe using nth child selector or something different?)

Or should I use JavaScript, and if yes, how it should look like?

Matthew Johnson
  • 4,875
  • 2
  • 38
  • 51
JoannaFalkowska
  • 2,771
  • 20
  • 37
  • if I'm understanding correctly you could use the same image twice using the same image and multiple backgrounds, how big is the Image anyway? processing with Js could most likely affect performance more. If you want to do this with css you could also use :before and :after pseudo-selectors to place the background, flip it in one of the instances and use background position to set the offsets so they can be aligned – javiercf Jun 02 '14 at 01:04
  • Let's say that image size is about 1600x1000px, ~400 KB. The point is I don't want to force user to download double-sized image when I could just flip the same. Maybe it's not really a big deal, rather tricky question, because I feel that there should be some answer to this problem. How exactly could I use multiple backgrounds in this case? – JoannaFalkowska Jun 02 '14 at 10:45
  • 1
    I think you are s.o.l. see [**this post**](http://stackoverflow.com/questions/17949490/flip-vertically-a-background-image-every-time-it-repeat-y) and [**this post**](http://stackoverflow.com/questions/5768998/how-to-flip-background-image-using-css) – MilkyTech Jun 02 '14 at 17:15

0 Answers0