Collection of hand-picked HTML and CSS fixed background code examples from codepen and other resources. Update of September 2019 collection. 1 new item.
Related Articles
- CSS Animated Backgrounds
- CSS Background Patterns
- CSS Particle Backgrounds
- CSS Triangle Backgrounds
- jQuery Background Plugins
Links
Made with
- HTML / CSS
About a code
Grid with Fixed Background
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: font-awesome.css
Made with
- HTML / CSS
About the code
Background-Attachment Fixed
Fixed background with scrolling content.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Made with
- HTML / CSS
About the code
background-attachment: fixed;
Background with CSS propety background-attachment: fixed;
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Made with
- HTML / CSS (SCSS)
About the code
Background Scroll Effect
Pure CSS background image scroll effect.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Made with
- HTML / CSS (SCSS)
About the code
Background Attachment Fixed
Pure CSS background attachment fixed within container.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Made with
- HTML / CSS (SCSS)
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: -
Made with
- HTML / CSS (SCSS)
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: -
Made with
- HTML / CSS / JS
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
Made with
- HTML / CSS
About the code
Scroll Magic In Plain CSS
If mouse wheel down ... scroll right.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Made with
- HTML / CSS
About the code
Retro CSS Slideshow
CSS slideshow with background-attachment: fixed;
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Made with
- HTML / CSS
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: -