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's behaving normal. Here is code:

CSS:

.AboutBg
{
    background-attachment: fixed;
    background-image: url("../Images/LandingPage/smart.jpg");
    background-position: 0 0;
    background-repeat: repeat;
    background-size: cover;
    height: 90%;
    position: absolute;
    width: 100%;
}

HTML:

<div class="AboutBg"></div>

score 15 · Answer 1 · answered Dec 01 '13 at 20:52

15

I just had a similar issue, my cover + fixed was not working and images were disappearing on chrome and was able to solve it like this:

Crawl to higher node definitions and disable some of the CSS properties that may have conflicts, in my case for example, there was a:

backface-visibility: hidden at the <body> level that was causing it. This was being introduced by the animate.css framework.

Sorry its not a concrete answer but at least this provides some idea of how to debug your css code.

answered Dec 01 '13 at 20:52

Juan Carlos Moreno

2,754
3
22
21

Yes, and thank you very very much, that was exactly the problem, and it solved it. Thank you. – Hooman Askari Jan 30 '14 at 08:57
1

I commented out `-webkit-animation-fill-mode: both;` in `class` of `.animated` and it solved the issue. – Mr. Alien May 07 '14 at 17:47
This doesn't seem to work. I can reproduce (in Chrome!) without 'higher node definitions': https://jsfiddle.net/sg1gzk3j/ – Stijn Sanders May 18 '18 at 08:15

score 2 · Answer 2 · answered Sep 26 '13 at 13:03

2

The Above Code should work with Chrome For Windows ,

Just try including the vendor prefix

-webkit-background-size: cover !important;

And give it a try

answered Sep 26 '13 at 13:03

epynic

1,124
2
14
26

3

Thanks but now i got the answer ,i have set z-index:-1; – Kamdhenu Gaiya Sep 26 '13 at 13:23
Setting Z-index to -1 fixed this issue for me as well. – M-Pixel Mar 25 '15 at 07:05

score 2 · Answer 3 · answered Apr 09 '15 at 04:39

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.

score 1 · Answer 4 · answered May 29 '14 at 10:20

1

Although this is coming a bit late, by adding the css style below seems to fix it for me.

html, body { 
-webkit-transform: translate3d(0px, 0px, 0px);
}

answered May 29 '14 at 10:20

sabatino

74
4

score 1 · Answer 5 · edited Nov 20 '14 at 19:43

1

This fixed my problem:

.section{ position: static; }

(was position: relative)

edited Nov 20 '14 at 19:43

blurfus

13,485
8
55
61

answered Nov 20 '14 at 19:18

Nicholas Thompson

11
1

score 1 · Answer 6 · answered Jul 04 '18 at 08:25

@sabatino's answer is right, but this will destroy the background-attachment:fixed bahavior in Firefox, because they also interpret -webkit prefixed properties - for whatever reason.

So you have to override it like this to make it work in both browsers:

-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: none;

score 0 · Answer 7 · answered Jul 04 '14 at 13:36

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()
    });
});

score 0 · Answer 8 · answered Mar 29 '15 at 07:10

0

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

Z-index: -1

answered Mar 29 '15 at 07:10

adrianmcli

1,956
3
21
49

score 0 · Answer 9 · answered Apr 17 '15 at 13:30

0

With chrome 42, background attachment was not working for me... until I close Dev Tools.

Hope this can save someone's time!

answered Apr 17 '15 at 13:30

Hugo H

6,029
5
37
57

score 0 · Answer 10 · answered May 15 '15 at 17:53

bootstrap carousel was causing it for me. Adding this CSS to reverse transition properties fixed it.

#carouselName .carousel-inner div.item.active {
  /* left: 0; */
  -webkit-transform: none;
  transform: none;
  -webkit-backface-visibility: visible;
  -webkit-font-smoothing: antialiased;
  -webkit-perspective: none;
  -webkit-transform: none;
  -webkit-transition-delay: none;
  -webkit-transition-duration: none;
  -webkit-transition-property: none;
  -webkit-transition-timing-function: none;
  backface-visibility: visible;
}

score 0 · Answer 11 · answered Aug 31 '15 at 22:32

0

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.

answered Aug 31 '15 at 22:32

Wilhelm

1,407
5
16
32

background-attachment:fixed not working in chrome

11 Answers11

Linked