10 CSS Fixed Backgrounds
Collection of hand-picked HTML and CSS fixed background code examples.
- CSS Animated Backgrounds
- CSS Background Patterns
- CSS Particle Backgrounds
- CSS Triangle Backgrounds
- jQuery Background Plugins
About the code
Background-Attachment Fixed
Fixed background with scrolling content.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
About the code
background-attachment: fixed;
Background with CSS propety background-attachment: fixed;
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Author
- carpe numidium
About the code
Background Scroll Effect
Pure CSS background image scroll effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Author
- Ali Klein
About the code
Background Attachment Fixed
Pure CSS background attachment fixed within container.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Author
- Geoff Graham
About the code
Scrolling Backgrounds In CSS
Seattle trip: scrolling backgrounds in CSS with background-attachment: fixed;
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Author
- Justin Aven
About the code
Fixed Background Full Sections
Defined full screen sections with atlernating sections having fixed / no-scrolling background images.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Author
- codyhouse.co
About the code
Fixed Background Effect
A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: jquery.js
About the code
Scroll Magic In Plain CSS
If mouse wheel down ... scroll right.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Author
- Joshua Mitchell
About the code
Retro CSS Slideshow
CSS slideshow with background-attachment: fixed;
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Author
- Derek Palladino
About the code
Scroll Flip-Book
Using background images and different sections revealing each fixed background image to create a flip-book effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -