css - Background Attachment Fixed—Google Chrome -

css - Background Attachment Fixed—Google Chrome -

currently on firefox , safari background-attachment: fixed property working, not responding on chrome.

here page works in ff & safari http://prestonmcpeak.com/work/enigma.html

this desired effect i'm looking working in 3 browsers: http://codyhouse.co/demo/alternate-fixed-scroll-background/index.html

i have feeling has position tag somewhere on page.

<section class="project-header "> <div class="project-background show-for-large-up"></div> <section class="enigma"></section> </section> .project-header { section { position: fixed; height: 100%; width: 100%; top: 0; left: 0; z-index: -1; &.enigma { background-size: contain; background-attachment: fixed; } } .project-background { padding: 20% 0; margin: 0; } .enigma { background: url(../assets/img/enigma-1-m.jpg) no-repeat center top; }

ok, think know problem is. on css-tricks forum had same issue.

the problem using -webkit-transform on 1 of parent elements div you're applying fixed background on.

to solve problem have remove -webkit-transform section class name of "main-section".

so this:

.main-section { -webkit-transform: translate3d(0,-45px,0); margin-bottom: -45px; }

should this:

.main-section { margin-bottom: -45px; }

i managed replicate , prepare problem on enigma url provided. please allow me know if fixes problem you.

css fixed background-attachment