Flip vertically a background-image every time it repeat-y

javascript css css-position background-position
rpasianotto picture rpasianotto · Jul 30, 2013 · Viewed 31k times · Source

I'm searching for a trick that repeat my background image vertically, but every time the image is repeated I want to flip it vertically.

I tried all the things in my mind with repeat-y but I don't found a solution, even searching for it in google.

Example:

Background Straight background-image

Background flipped vertically Flipped background-image when it repeat-y

Background flipped vertically again And then flipped again to straight

There is a method to obtain that position?

I'll accept the solution in JScript (and library of it) only if there isn't a solution with pure css.

Thank you all!

Answer

Marc Audet picture Marc Audet · Jul 30, 2013

This cannot be done using standard CSS3 since there are no CSS3 properties to rotate a background image.

Reference: http://www.w3.org/TR/css3-background

As suggested, combine the two motifs in a single image, much simpler and will always work.

Related questions

How to make div fixed after you scroll to that div?

How to make a div remain fixed after you scroll to that div? I have a div that is later in a page and you need to scroll to get to that div. If I use: .divname { position: fixed; } The …

Read More
How to position a Bootstrap popover?

I'm trying to position a Bootstrap popover for a trigger that sits on the far top-right corner of a 960px wide web page. Ideally, I'd position it on the bottom and move the arrow with CSS (so the arrow is …

Read More
fixed positioned element flicker in IE only, how to solve?

Weird problem in IE11, the fixed background of the following project flickers when using mousewheel or cursor keys only. This is a bug, for sure. website: http://gerbrandy.zitemedia.nl:88/ I use a script to resize the background proportional but …

Read More