25+ CSS Fixed Backgrounds - Free Code + Demos

Background-attachment fixed

Works in browsers which support mix-blend-mode https://caniuse.com/#search=mix-

Defined full screen sections with atlernating sections having fixed / no-scrolling background images

SCROLL MAGIC IN PLAIN CSS based on Hornebom's Pen Head Over Heels.

Made with pure CSS! Colour scheme by ericaspooner (http://www.colourlovers.com/palette/110225/Vintage_Modern)

Based on http://andrevv.com/. Using background images and different sections revealing each fixed background image to create a flip-book effect. This does not work on iOS and Android (specifically 'background-attachement: fixed;' does not work).

This is a true cross browser solution for css-only fixed-background panels, works even in iOS!

An interesting semi transparent black overlay with text appears on home screen when scrolled (doesn't work on mobile devices for now)

An example of four divs two of which have a fixed background. While scrolling it creates a nice effect. Extensive use of flexbox to align everything and generated content to create the animated buttons.

This pen was inspired by Joey Hayes codepen: https://codepen.io/joeyred/pen/pEagLQ ) AND the stack overflow work done by Vincent ( see stack overflow question http://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-on-mobile ) With a bit of javascript and the us...

Read More

This was a little test to try inverting a fixed background.

Ever try to set a background image to fixed on mobile? It doesn't end well. This is a work around with pure HTML and CSS to get a fixed background that works on mobile browsers. This method hasn't been thoroughly tested yet, however it works on iOS Safari. PLEASE NOTE: It seems that whe...

Read More

This Pen shows two nice effects that you can easily achieve with the CSS property background-attachment:fixed. I describe this techniques in the pen itself == so no "lorem ipsum" here