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

  1. CSS Animated Backgrounds
  2. CSS Background Patterns
  3. CSS Particle Backgrounds
  4. CSS Triangle Backgrounds
  5. jQuery Background Plugins

Author

  • Airen

Made with

  • HTML / CSS

About a code

Fixed Background Effect (Parallax Scrolling Effect)

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Demo image: Grid with Fixed Background

Author

  • Jacob Potvin

Made with

  • HTML / CSS

About a code

Grid with Fixed Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: font-awesome.css

Author

  • Joanne-codepage

Made with

  • HTML / CSS

About a code

CSS Fixed Background Scrolling Effect

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Wendy

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: -

Author

  • Clare

Made with

  • HTML / CSS

About a code

Center Content, Fixed Background

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Steve Gibbons

Made with

  • HTML / CSS (SCSS)

About a code

CSS Fixed Background Hero

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • mtness Excelsior

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: -

Author

  • Luke Cheng

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: -

Author

  • carpe numidium

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: -

Author

  • Ali Klein

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: -

Author

  • Pooja Patel

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: -

Author

  • Maria Burlando

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: -

Author

  • Geoff Graham

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: -

Author

  • Geoff Yuen

Made with

  • HTML / CSS (SCSS)

About a code

Fun with Unsplash.it

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

Author

  • Justin Aven

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: -

Author

  • codyhouse.co

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

Author

  • Kseso

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: -

Author

  • Hornebom

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: -

Author

  • Joshua Mitchell

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: -

Author

  • Derek Palladino

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: -