GIve css3 rotate to a DIV in Chrome then the background-attachment:fixed creating bug

Question

My background-attachment:fixed is working fine. But when I define CSS3 rotate on that DIV and scroll down then background-attachment:fixe

Answer 1

I have a working solution that can use both fixed alongside transform rotate.

This info takes into consideration that they can't work together, but let's make them work separate.

Once you have some real content under the image, then will will prevent the bottom right corner of that image from touching the bottom right corner of the browsers viewport, which is the last valid location for using the fixed value. Because after that it's land of void.

Here's the fiddle!

This updated fiddle shows the rotate going the opposite direction.

Per our discussion on your exact requirements, I now have what your looking for. This method is a complete re-write and uses a mask effect combined with the rotate to allow the internal image to remain un-rotated... but that too can have it's own rotate!

Here's the NEW Fiddle with lots of comments that explains the CSS.

Status Update: None of my answers are correct because I did not realize the OP's complete requirements. Currently, the use of rotate with a fixed image is a non-standards method which was previously discussed above via link info. Perhaps a jQuery Parallax method is appropriate for this unique and challenging requirement.