background-attachment:fixed not working in chrome

Question

I am developing a website in which I have used the background-attachment:fixed property. It\'s working fine in Firefox, but the image is not fixed. In Chrome it

Answer 1

A late answer but I came around with this and somehow I made a hack for this one.

The idea was to create an inner element which will hold the background-image and will act same as background-attachment:fixed property.

Since this property makes the background image position relative to the window we have to move the inner element within it's container and this way we will get that effect.

var parallax_container = $(".parallax_container");
/*Create the background image holder*/
parallax_container.prepend("<div class='px_bg_holder'></div>");
$(".px_bg_holder").css({
    "background-image" : parallax_container.css("background-image"), /*Get the background image from parent*/
    "background-position" : "center center",
    "background-repeat" : "no-repeat",
    "background-size" : "cover",
    "position" : "absolute",
    "height" : $(window).height(), /*Make the element size same as window*/
    "width" : $(window).width()
});
/*We will remove the background at all*/
parallax_container.css("background","none");
parallax_container.css("overflow","hidden");/*Don't display the inner element out of it's parent*/
$(window).scroll(function(){
    var bg_pos = $(window).scrollTop() - $(".parallax_container").offset().top; /*Calculate the scrollTop of the inner element*/
    $(".px_bg_holder").css({
        "margin-top" : bg_pos+"px"
    });
});
$(window).resize(function(){
    $(".px_bg_holder").css({
        "height" : $(window).height(),
        "width" : $(window).width()
    });
});

Answer 2

This fixed my problem:

.section{ position: static; }  

(was position: relative)

Answer 3

If transform: translate3d(); is used anywhere on your website, background-attachment: fixed; will break in chrome. If possible, change all instances of transform: translate3d(); to transform: translate();. This should fix your problem.

Answer 4

nothing was working for me, and finally this did the trick with no reasoning behind :)

-webkit-background-size: cover !important;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: fixed !important;
position: static !important;
z-index: -1 !important;

This is working for me in both firefox and chrome. Hope that helps.

Answer 5

Not sure about other people, but this worked for me:

Z-index: -1