0

I have background-attachment: fixed; on my hero section and it works in firefox and safari but not in chrome. I can get it to work by changing to position:relative; and z-index: -1; but then the buttons within the hero become unusable and this also creates problems in firefox and safari. 

#hero {
padding-top: 60px;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

I tried changing the parent positions to static based on other post I found but that didn't work either.

http://bayarddev.com/fca/about-us/

Matt Sobieray
  • 23
  • 4
  • works for me: http://imgur.com/X9lkJwC. Maybe try clearing your cache. You can always try an incognito window if you don't know how to clear your cache (ctrl+shift+n). – dlane Apr 04 '14 at 17:41
  • can you post your html? –  Apr 04 '14 at 17:42
  • Not working in Chrome for me either, are you using anything that would promote it to a new layer such as transform Z or backface-visibility? – Josh Rutherford Apr 04 '14 at 17:46

1 Answers1

1

Ok I see it now. On .hero's parent element .off-canvas-wrap and .inner-wrap you are using -webkit-backface-visibility: hidden. If you turn this off the background attachment works fine.

Josh Rutherford
  • 2,683
  • 1
  • 16
  • 20