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

New Answer for Recent Developments: July 4, 2012

---

I have a jsFiddle work-in-progress that I would like to share with you and release early.

It should give you ideas on how to accomplish this particular style.

Particularly, it has a Parallax effect to it.

Note in unfinished Demo the image can be set in the div differently (it's set fixed and repeated), use CSS3 contain or cover for example for different Parallax effect for the content it's displaying.

It's not limited to images and any static content can be used instead since this object is never rotated/counter rotated which does not cause browser CPU hit.

jsFiddle Screenshot (it was captured zoomed out):
Mask is intentionally shown in the image below, it should match the background color. For select browsers, you can use CSS3 border-image property instead of colored mask (since yellow mask is actually border!).

---

Example 1:
Here's a jsFiddle with the mask, opacities, and extra padding adjusted (to somewhat view as intended.).

---

Example 2:
Here's a jsFiddle as above with content shown with CSS3 cover method to illustrate punch-out effect for whole webpage.

---

I need to get back to this project soon. In the mean time, please feel free to use this early work however you wish. Cheers!