Collection of hand-picked HTML and CSS fixed background code examples from Codepen, GitHub and other resources. Update of November 2021 collection. 9 new items.
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
Fixed Background Effect (Parallax Scrolling Effect)
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -

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
Links
Made with
- HTML / CSS
About a code
CSS Fixed Background Scrolling Effect
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
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: -
Links
Made with
- HTML / CSS
About a code
Center Content, Fixed Background
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Fixed Background Hero
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS
About a code
CSS-Only Fixed-Background Parallax Scroll
This is a true cross browser solution for CSS-only fixed-background panels.
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: -
Links
Made with
- HTML / CSS
About a code
Semi-Trans Overlay
An interesting semi transparent black overlay with text appears on home screen when scrolled.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
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.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: yes
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Fun with Unsplash.it
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: -
Links
Made with
- HTML / CSS (SCSS)
About a code
CSS Fixed Backgrounds
This example shows two nice effects that you can easily achieve with the CSS property background-attachment:fixed
.
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: -