Collection of hand-picked HTML and CSS fixed background code examples.

Related Articles

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

Author

  • Wendy

Links

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

  • Luke Cheng

Links

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

Links

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

Links

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

  • Geoff Graham

Links

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

  • Justin Aven

Links

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

Links

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

Links

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

  • Joshua Mitchell

Links

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

Links

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