15+ CSS Stable Background Effect [Scrolling Backgrounds/fixed background]

Collection of free HTML and CSS background Animation examples from Codepen and other resources.
Fixed Background Parallax Scrolling Effect and Background Attachment Fixed.

Table of Contents

• Scroll Flip-Book
• Retro CSS Slideshow
• CSS Fixed Backgrounds
• If mouse wheel down ... scroll right
• Fixed background full sections
• Fun with unsplash.it
• Scrolling Backgrounds in CSS - Seattle Trip
• Scrolling fixed background
• Semi-trans overlay
• Background Attachment Fixed within Container
• Pure CSS Background Image Scroll Effect
• mottos-background-attachment: 固定背景
• CSS-Only Fixed-Background Parallax Scroll
• CSS fixed background hero
• Center content, fixed background
• Background-attachment fixed
• HCSS Fixed Background Scrolling Effect
• Practice 3 of Grid w/fixed background
• Fixed Background Parallax Scrolling Effect

Scroll Flip-Book

See the Pen Scroll Flip-Book by Derek Palladino (@derekjp) on CodePen.

Retro CSS Slideshow

See the Pen Retro CSS Slideshow by Joshua Mitchell (@Joshuasm32) on CodePen.

CSS Fixed Backgrounds

See the Pen CSS Fixed Backgrounds by Hornebom (@Hornebom) on CodePen.

If mouse wheel down ... scroll right

See the Pen If mouse wheel down ... scroll right by Kseso (@Kseso) on CodePen.

Fixed background full sections

See the Pen Fixed background full sections by Justin Aven (@justinaven) on CodePen.

Fun with unsplash.it

See the Pen Fun with unsplash.it by Geoff Yuen (@geoffyuen) on CodePen.

Scrolling Backgrounds in CSS - Seattle Trip

See the Pen Scrolling Backgrounds in CSS - Seattle Trip by Geoff Graham (@geoffgraham) on CodePen.

Scrolling fixed background

See the Pen Scrolling fixed background by Maria Burlando (@Ayra_Lux) on CodePen.

Semi-trans overlay

See the Pen Semi-trans overlay by Pooja Patel (@poojavpatel) on CodePen.

Background Attachment Fixed within Container

See the Pen Background Attachment Fixed within Container by Ali Klein (@AliKlein) on CodePen.

Pure CSS Background Image Scroll Effect

See the Pen Pure CSS Background Image Scroll Effect by carpe numidium (@carpenumidium) on CodePen.

mottos-background-attachment: 固定背景

See the Pen mottos-background-attachment: 固定背景 by Luke Cheng (@PhotoLuke) on CodePen.

CSS-Only Fixed-Background Parallax Scroll

See the Pen CSS-Only Fixed-Background Parallax Scroll by mtness Excelsior (@mtness) on CodePen.

CSS fixed background hero

See the Pen CSS fixed background hero by Steve Gibbons (@steveg_digital) on CodePen.

Center content, fixed background

See the Pen Center content, fixed background by Clare (@gerbera36) on CodePen.

Background-attachment fixed

See the Pen Background-attachment fixed by Wendy (@Wendy-Ho) on CodePen.

HCSS Fixed Background Scrolling Effect

See the Pen HCSS Fixed Background Scrolling Effect by Joanne-codepage (@joanne-codepage) on CodePen.

Practice 3 of Grid w/fixed background

See the Pen Practice 3 of Grid w/fixed background by Jacob Potvin (@jpotvin) on CodePen.

Fixed Background Parallax Scrolling Effect

See the Pen Fixed Background Parallax Scrolling Effect by Airen (@airen) on CodePen.