Fondo adjunto: arreglado no funciona en cromo

Estoy desarrollando un sitio web en el que he usado el background-attachment:fixed propiedad background-attachment:fixed . Está funcionando bien en Firefox, pero la imagen no está arreglada. En Chrome se está comportando de manera normal. Aquí está el código:

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:

 

Acabo de tener un problema similar, mi cover + fix no funcionaba y las imágenes desaparecían en Chrome y pude resolverlo así:

Rastrear a definiciones de nodos superiores y deshabilitar algunas de las propiedades CSS que pueden tener conflictos, en mi caso, por ejemplo, hubo una:

backface-visibility: hidden en el nivel que lo estaba causando. Esto fue introducido por el marco animate.css.

Lo sentimos, no es una respuesta concreta, pero al menos esto proporciona una idea de cómo depurar su código CSS.

nada me funcionaba, y finalmente esto funcionó sin ningún razonamiento detrás 🙂

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

Esto está funcionando para mí tanto en Firefox como en Chrome. Espero que ayude.

El código anterior debería funcionar con Chrome para Windows,

Solo intente incluir el prefijo del vendedor

 -webkit-background-size: cover !important; 

Y dale una oportunidad

Esto solucionó mi problema:

 .section{ position: static; } 

(era la position: relative )

Aunque esto llega un poco tarde, al agregar el estilo css a continuación parece que lo soluciono.

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

Una respuesta tardía pero llegué con esto y de alguna manera hice un truco para este.

La idea era crear un elemento interno que mantendría la imagen de fondo y actuará igual que background-attachment:fixed propiedad background-attachment:fixed .

Dado que esta propiedad hace que la posición de la imagen de fondo sea relativa a la ventana, tenemos que mover el elemento interno dentro de su contenedor y de esta manera obtendremos ese efecto.

 var parallax_container = $(".parallax_container"); /*Create the background image holder*/ parallax_container.prepend("
"); $(".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() }); });

No estoy seguro de otras personas, pero esto funcionó para mí:

Z-index: -1

Con Chrome 42 , el archivo adjunto de fondo no funcionaba para mí … hasta que cierre Dev Tools.

Espero que esto pueda ahorrar el tiempo de alguien!

El carrusel de bootstrap me lo estaba causando. La adición de este CSS para revertir las propiedades de transición lo arregló.

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

Si transform: translate3d(); se utiliza en cualquier lugar de su sitio web, background-attachment: fixed; se romperá en cromo. Si es posible, cambie todas las instancias de transform: translate3d(); transform: translate(); . Esto debería solucionar su problema.

La respuesta de @sabatino es correcta, pero esto destruirá el archivo adjunto de fondo: comportamiento fijo en Firefox, porque también interpretan propiedades prefijadas de -kebkit, por cualquier razón.

Así que debes anularlo así para que funcione en ambos navegadores:

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