pseudo:before not taking background property in chrome - css

Question

The pseudo :before works on Firefox, Safari but not in Chrome.
Its a square box rotated to form a diamond shape. But, using :before the bg is again rotated backwards and given a position fixed. It gives a really nice effect !
Check My Site :
www.wangeltmg.com
When you scroll at first, the background overlaps and creates blurry image to get cleared.. !
All i did is
#element3
{
width: 1000px;
height:1000px;
line-height: 5em;
margin: 0px auto;
border: 0px solid #666;
border-radius: 3px;
margin-top:150px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
overflow: hidden;
left:0; right:0;
top:10%;
}
#element3:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -10%;
z-index: 0;
background: url(../img/custom11.jpg) 0 0 no-repeat fixed;
background-size:135% 135%;
background-position:140px -315px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Is there anything to work on regarding the compatibility with Chorme ?
I would love to have your answers fellas.
Thanks.

Answer 1

Your CSS background is behaving bizarre on chrome because you needed to add:
-webkit-transform CSS 3 transform with prefix for Chrome.
.parallax-two #element3 {
border: 0 solid #666666;
border-radius: 3px;
height: 1000px;
left: 0;
line-height: 5em;
margin: 150px auto 0;
overflow: hidden;
position: absolute;
right: 0;
top: 10%;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
width: 1000px;
}
http://fiddle.jshell.net/mmvdz/6
http://fiddle.jshell.net/mmvdz/6/show/
For Firefox, Chrome, Opera, IE etc. it is preferred to add the vendor prefix CSS3 versions as well. It is needed for older versions of Firefox as well for example.
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
If you use editor like Sublime Text to code manually. You have plugins which add this vendor prefix automatically.
http://www.hongkiat.com/blog/css-automatic-vendor-prefix/
I do see that you have another problem on Chrome. The fixed div has issues with z-index. And it seems it has to do with CSS 3 transform properties for webkit which makes the triangle appear above the fixed div but without the blur effect in Chrome.
#home-wrap {
-webkit-backface-visibility: hidden;
}