25+ CSS Fixed Backgrounds - Free Code + Demos
Collection of 25+ CSS Fixed Backgrounds. All items are 100% free and open-source.
1. Background-attachment Fixed
Background-attachment fixed
Author: Wendy (Wendy-Ho)
Links: Source Code / Demo
Created on: February 20, 2019
Made with: HTML, CSS
Tags: background-attachment-fixed, background, attachment, fixed
2. background Mottos-background-attachment: Fixed;固定背景
Author: Luke Cheng (PhotoLuke)
Links: Source Code / Demo
Created on: June 19, 2018
Made with: HTML, CSS
3. Pure CSS Background Image Scroll Effect
Works in browsers which support mix-blend-mode https://caniuse.com/#search=mix-
Author: carpe numidium (carpenumidium)
Links: Source Code / Demo, Caniuse.com
Created on: January 6, 2018
Made with: HTML, SCSS
Tags: mix-blend-mode
4. Background Attachment Fixed Within Container
Author: Ali Klein (AliKlein)
Links: Source Code / Demo
Created on: October 20, 2017
Made with: HTML, SCSS
5. Scrolling Backgrounds In CSS - Seattle Trip
Author: Geoff Graham (geoffgraham)
Links: Source Code / Demo
Created on: August 8, 2016
Made with: HTML, SCSS
6. Fixed Background Full Sections
Defined full screen sections with atlernating sections having fixed / no-scrolling background images
Author: Justin Aven (justinaven)
Links: Source Code / Demo
Created on: July 15, 2015
Made with: HTML, SCSS
7. Fixed Background Effect
Created on: March 25, 2015
8. If Mouse Wheel Down ... Scroll Right
SCROLL MAGIC IN PLAIN CSS based on Hornebom's Pen Head Over Heels.
Author: Kseso (Kseso)
Links: Source Code / Demo
Created on: March 7, 2015
Made with: HTML, CSS
9. Retro CSS Slideshow
Made with pure CSS! Colour scheme by ericaspooner (http://www.colourlovers.com/palette/110225/Vintage_Modern)
Author: Joshua Mitchell (Joshuasm32)
Created on: June 30, 2014
Made with: HTML, CSS, JS
Tags: animation, css, slideshow
10. Scroll Flip-Book
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).
Author: Derek Palladino (derekjp)
Links: Source Code / Demo, Andrevv.com
Created on: October 30, 2013
Made with: HTML, CSS
Tags: scroll, flip-book, background, image
11. CSS-Only Fixed-Background Parallax Scroll
This is a true cross browser solution for css-only fixed-background panels, works even in iOS!
Author: mtness Excelsior (mtness)
Links: Source Code / Demo
Created on: August 30, 2018
Made with: HTML, CSS
Tags: css3, css-only, fixed-background, parallax
12. Fixed Background With Scrolling Content
Author: Carlos Mendez (icarlosmendez)
Links: Source Code / Demo
Created on: September 24, 2014
Made with: HTML, CSS
Tags: css, no-javascript
13. Fixed Image Backgrounds
Author: Louis Coyle (dropside)
Links: Source Code / Demo
Created on: May 11, 2013
Made with: HTML, SCSS
14. Center Content, Fixed Background
Author: Clare (gerbera36)
Links: Source Code / Demo
Created on: October 10, 2018
Made with: HTML, CSS
Tags: css, fixed-background
15. Fixed Background
Author: AH Nayeem (maxnayeem)
Links: Source Code / Demo
Created on: January 17, 2018
Made with: HTML, CSS
Tags: fixed-background, parallex
16. Semi-trans Overlay
An interesting semi transparent black overlay with text appears on home screen when scrolled (doesn't work on mobile devices for now)
Author: Pooja Patel (poojavpatel)
Links: Source Code / Demo
Created on: September 13, 2017
Made with: HTML, CSS
Tags: trans overlay, scroll, fixed-background
17. Scrolling Fixed Background
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.
Author: Maria Burlando (Ayra_Lux)
Links: Source Code / Demo
Created on: August 2, 2017
Made with: HTML, SCSS
Tags: fixed-background, generated-content, animated-buttons, flexbox, responsive
18. Fixed Background With Text Scroll
Author: Fernanda Leite (nandaleite)
Links: Source Code / Demo
Created on: June 8, 2017
Made with: HTML, CSS, JS
Tags: fixed-background, text scroll
19. Multiple Fixed Backgrounds On Mobile
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
Author: kerry ruddock (KerryRuddock)
Links: Source Code / Demo
Created on: April 19, 2017
Made with: HTML, CSS, JS
Tags: mobile, fixed-background, android
20. Fixed Background Demo With Cats
Author: Angelique (angeliquejw)
Links: Source Code / Demo
Created on: January 26, 2016
Made with: HTML, SCSS
Tags: fixed-background, css, cats
21. Simple Fixed Background Scroll Site
Author: Kira (Allan11)
Links: Source Code / Demo
Created on: June 21, 2016
Made with: Pug, Sass
CSS Pre-processor: Sass
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: fixed-background, scroll, scroll background, scroll on css
22. Inverted Background
This was a little test to try inverting a fixed background.
Author: Wilson Staley (wilstaley)
Links: Source Code / Demo
Created on: February 1, 2017
Made with: HTML, CSS
Tags: fixed-background, inverted, parallax, background, flip
23. Fixed Background On Mobile Browser. HTML & CSS Only.
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
Author: Brian Hayes (joeyred)
Links: Source Code / Demo
Created on: October 6, 2016
Made with: HTML, SCSS
Tags: ios safari, mobile, fixed-background, iphone, android
24. CSS Fixed Backgrounds
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
Author: Hornebom (Hornebom)
Links: Source Code / Demo
Created on: March 5, 2015
Made with: HTML, SCSS
Tags: css parallax, fixed-background
More Awesome Lists:
Share: