20 CSS Fixed Backgrounds

About a code

Fixed Background Effect (Parallax Scrolling Effect)

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

Responsive: yes

Dependencies: -

About a code

Grid with Fixed Background

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

Responsive: yes

Dependencies: font-awesome.css

About a code

CSS Fixed Background Scrolling Effect

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

Responsive: yes

Dependencies: -

About the code

Background-Attachment Fixed

Fixed background with scrolling content.

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

Responsive: yes

Dependencies: -

About a code

Center Content, Fixed Background

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

Responsive: yes

Dependencies: -

About a code

CSS Fixed Background Hero

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

Responsive: yes

Dependencies: -

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

About the code

background-attachment: fixed;

Background with CSS propety background-attachment: fixed;

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

Responsive: yes

Dependencies: -

About the code

Background Scroll Effect

Pure CSS background image scroll effect.

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

Responsive: yes

Dependencies: -

About the code

Background Attachment Fixed

Pure CSS background attachment fixed within container.

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

Responsive: no

Dependencies: -

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

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

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

About a code

Fun with Unsplash.it

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

Responsive: yes

Dependencies: -

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

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

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

About the code

Retro CSS Slideshow

CSS slideshow with background-attachment: fixed;

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

Responsive: yes

Dependencies: -

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