CODEWITHSUNDEEP
htmlcssgoogle-chrome
Kamdhenu Gaiya
Kamdhenu Gaiya

Reputation: 15

background-attachment:fixed not working in chrome

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>

Upvotes: 1

Views: 17956

Answers (11)

Thomas
Thomas

Reputation: 51

@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;

Upvotes: 1

Wilhelm
Wilhelm

Reputation: 1437

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.

Upvotes: 0

D-bone
D-bone

Reputation: 1

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

Upvotes: 0

Hugo H
Hugo H

Reputation: 6362

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

Hope this can save someone's time!

Upvotes: 0

rosnk
rosnk

Reputation: 1098

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.

Upvotes: 2

adrianmcli
adrianmcli

Reputation: 1996

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

Z-index: -1

Upvotes: 0

Nicholas Thompson
Nicholas Thompson

Reputation: 11

This fixed my problem:

.section{ position: static; }

(was position: relative)

Upvotes: 1

Rosmarine Popcorn
Rosmarine Popcorn

Reputation: 10965

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

Upvotes: 0

sabatino
sabatino

Reputation: 74

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

Upvotes: 1

Juan Carlos Moreno
Juan Carlos Moreno

Reputation: 2784

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.

Upvotes: 15

epynic
epynic

Reputation: 1164

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

Upvotes: 2

Related Questions