Menu
My background-attachment:fixed is working fine. But when I define CSS3 rotate on that DIV and scroll down then background-attachment:fixed stops working.
Check this http://jsfiddle.net/P3jS4/
Right now I am working on chrome18.
When you remove the rotate css then the background-attachment:fixed works fine.
http://jsfiddle.net/P3jS4/2
933
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
The background-attachment CSS property sets whether a background image's position is fixed within the viewport, or scrolls with its containing block.
This is not a bug.
You're trying to do something the spec hasn't defined yet. It says in the comments:
What do fixed backgrounds do in transforms? They should probably ignore the transform completely, since - even transformed - the object should be acting as "porthole" through which the fixed background can be viewed in its original form.
The issue is that "fixed" means relative to the viewport (browser window), not the parent element. The viewport doesn't rotate and there is only one viewport.
Given the specification hasn't decided what the correct approach is then we don't know what you mean by "not work". If it "works" in other browsers that's because they have made a judgement without waiting for the spec to be updated. You should update your question to reflect the behaviour you want, not whether it "works" or not.
There is no point at this stage to expect a browser fix since you are working outside of the specification. My suggestion is to revise your code so you are following the specification through one of the following methods:
img rather than a backgroundIf none of these can be used, and no other workarounds are available then your answer is that it can't be done.
UPDATE: I just realised the spec I linked has been superceeded by a newer version which clarifies the expected behaviour as:
Fixed backgrounds are affected by any transform specified for the root element, and not by any other transforms.
Thus an element with a fixed background still acts like a "porthole" into an image that's fixed to the viewport, and transforms on the element affect the porthole, not the background behind it. On the other hand, transforming the root element will still transform everything on the page, rather than everything except for fixed backgrounds.
Assuming that by "not working" you mean the background doesn't rotate then what you are doing won't work in a conforming browser.
111
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!
41
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
