The CSS 'keithclark' solution for parallax scrolling uses the following HTML structure: (i.e. where the background & foreground are in separate elements)
<body>
<div class="parallax">
<div class="parallax__layer parallax__layer--back">
<div class="title">This is the background</div>
</div>
<div class="parallax__layer parallax__layer--base">
<div class="title">This is the foreground</div>
</div>
</div>
</body>
The HTML structure I have (which I can't easily change) has: (an outer fullwidth 'background' entity - which contains an inner max-width:1200px entity containing the foreground contents)
<body>
<div class="outerWrapper" style="background-image: url(example.jpg);">
<div class="innerWrapper">
<div>This is the foreground contents</div>
</div>
</div>
</body>
I can easily FIX the background by using 'background-attachment: fixed;' in the outerWrapper. But I haven't found a way of scrolling the background & foreground at different speeds. IS there a CSS only solution?