10 CSS Fixed Backgrounds

• Backgrounds, Fixed

30 seconds. (308 words)

10-css-fixed-backgrounds

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

  1. CSS Animated Backgrounds
  2. CSS Background Patterns
  3. 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: –