37+ CSS Fixed Backgrounds

In this comprehensive compilation, we are showcasing 37+ HTML and CSS fixed background examples. We’ve collected these resources from reliable platforms like CodePen and GitHub.

Each item, carefully selected, allows web designers, developers, and brands to create an immersive experience on their web projects, ranging from fixed backgrounds to advanced parralax effects and inverted backgrounds to scroll flip book effects.

Our compilation features versatile fixed background designs that not only enhance the aesthetics of your projects, but also amaze your site visitors.

Let’s explore these visually stunning HTML and CSS fixed background examples and and add visual interest to web pages at absolutely no cost.

1. Fixed Background with Scrolling Content

See the Pen <a href="https://codepen.io/icarlosmendez/pen/LYMbpa"> Fixed Background with Scrolling Content</a> by Carlos Mendez (<a href="https://codepen.io/icarlosmendez">@icarlosmendez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Carlos Mendez
Source: Code / Demo
Created on: SEPTEMBER 25, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

2. The Great Fall

See the Pen <a href="https://codepen.io/cjgammon/pen/AEGmdo"> The Great Fall</a> by CJ Gammon (<a href="https://codepen.io/cjgammon">@cjgammon</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: CJ Gammon
Source: Code / Demo
Created on: DECEMBER 7, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

3. Fixed Background-attachment

See the Pen <a href="https://codepen.io/siamak/pen/eYzPPx"> Fixed Background-attachment</a> by Siamak (<a href="https://codepen.io/siamak">@siamak</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Siamak
Source: Code / Demo
Created on: APRIL 27, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS)

4. Multiple Fixed Background Images

See the Pen <a href="https://codepen.io/kabirsingh/pen/wvBdXv"> Multiple Fixed Background Images</a> by Kabir Singh (<a href="https://codepen.io/kabirsingh">@kabirsingh</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kabir Singh
Source: Code / Demo
Created on: MARCH 11, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Webkit Clip with Fixed Background

See the Pen <a href="https://codepen.io/strawstack/pen/LNXpGG"> Webkit Clip with Fixed Background</a> by Richard (<a href="https://codepen.io/strawstack">@strawstack</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Richard
Source: Code / Demo
Created on: MAY 1, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

6. Fixed background scrolling content

See the Pen <a href="https://codepen.io/aakhya/pen/QJWovp"> Fixed background scrolling content</a> by Aakhya Singh (<a href="https://codepen.io/aakhya">@aakhya</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aakhya Singh
Source: Code / Demo
Created on: NOVEMBER 4, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

7. Fixed Background Illusion

See the Pen <a href="https://codepen.io/Boxshadow/pen/ZEbrPW"> Fixed Background Illusion</a> by Steve Reich (<a href="https://codepen.io/Boxshadow">@Boxshadow</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Steve Reich
Source: Code / Demo
Created on: MARCH 30, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

8. Fixed Background On Mobile Browser

See the Pen <a href="https://codepen.io/joeyred/pen/pEagLQ"> Fixed Background on Mobile Browser. HTML & CSS only.</a> by Brian Hayes (<a href="https://codepen.io/joeyred">@joeyred</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Brian Hayes
Source: Code / Demo
Created on: OCTOBER 6, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

9. Inverted Background

See the Pen <a href="https://codepen.io/wilstaley/pen/mRxmMr"> Inverted Background</a> by Wilson Staley (<a href="https://codepen.io/wilstaley">@wilstaley</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Wilson Staley
Source: Code / Demo
Created on: FEBRUARY 02, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. Grid with Fixed Background

See the Pen <a href="https://codepen.io/jpotvin/pen/abNgeqe"> Practice 3 of Grid w/fixed background – – AMFN method #30days Day 16</a> by Jacob Potvin (<a href="https://codepen.io/jpotvin">@jpotvin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jacob Potvin
Source: Code / Demo
Created on: OCTOBER 2, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

11. CSS-Only Fixed-Background Parallax Scroll

See the Pen <a href="https://codepen.io/mtness/pen/GXNEqM"> CSS-Only Fixed-Background Parallax Scroll</a> by mtness Excelsior (<a href="https://codepen.io/mtness">@mtness</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: mtness Excelsior
Source: Code / Demo
Created on: AUGUST 30, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

12. Fun with Unsplash.it

See the Pen <a href="https://codepen.io/geoffyuen/pen/VLqwgm"> Fun with unsplash.it</a> by Geoff Yuen (<a href="https://codepen.io/geoffyuen">@geoffyuen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Geoff Yuen
Source: Code / Demo
Created on: JULY 31, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

13. ScrollTrigger: SVG Text Mask

See the Pen <a href="https://codepen.io/creativeocean/pen/qBbBLyB"> ScrollTrigger: SVG Text Mask</a> by Tom Miller (<a href="https://codepen.io/creativeocean">@creativeocean</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tom Miller
Source: Code / Demo
Created on: JUNE 04, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

14. Background Mottos-Background-Attachment

See the Pen <a href="https://codepen.io/PhotoLuke/pen/ZRvqBd"> background mottos-background-attachment: fixed;固定背景</a> by Luke Cheng (<a href="https://codepen.io/PhotoLuke">@PhotoLuke</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Luke Cheng
Source: Code / Demo
Created on: JUNE 19, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

15. Scroll Flip-Book

See the Pen <a href="https://codepen.io/derekjp/pen/DKBeXQ"> Scroll Flip-Book</a> by Derek Palladino (<a href="https://codepen.io/derekjp">@derekjp</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Derek Palladino
Source: Code / Demo
Created on: OCTOBER 31, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

16. Center Content-Fixed Background

See the Pen <a href="https://codepen.io/gerbera36/pen/JmNrej"> Center content, fixed background</a> by Clare (<a href="https://codepen.io/gerbera36">@gerbera36</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Clare
Source: Code / Demo
Created on: OCTOBER 11, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

17. CSS Fixed Background Scrolling Effect

See the Pen <a href="https://codepen.io/joanne-codepage/pen/drWoee"> Html CSS Tutorial- CSS Fixed Background Scrolling Effect</a> by Joanne-codepage (<a href="https://codepen.io/joanne-codepage">@joanne-codepage</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joanne-codepage
Source: Code / Demo
Created on: MARCH 08, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

18. Retro CSS Slideshow

See the Pen <a href="https://codepen.io/Joshuasm32/pen/Bawpqg"> Retro CSS Slideshow</a> by Joshua Mitchell (<a href="https://codepen.io/Joshuasm32">@Joshuasm32</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Joshua Mitchell
Source: Code / Demo
Created on: JULY 01, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

19. HTML & CSS – Fixed Background Image

See the Pen <a href="https://codepen.io/miguelznunez/pen/LYLRjgW"> HTML & CSS – Fixed Background Image</a> by Miguel Nunez (<a href="https://codepen.io/miguelznunez">@miguelznunez</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Miguel Nunez
Source: Code / Demo
Created on: SEPTEMBER 04, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

20. Menu Grid with Fixed Background

See the Pen <a href="https://codepen.io/noahraskin/pen/JjrydbL"> Menu Grid with Fixed Background</a> by Noah Raskin (<a href="https://codepen.io/noahraskin">@noahraskin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Noah Raskin
Source: Code / Demo
Created on: DECEMBER 21, 2021
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

21. If Mouse Wheel Down … Scroll Right

See the Pen <a href="https://codepen.io/Kseso/pen/YPOVZJ"> If mouse wheel down … scroll right </a> by Kseso (<a href="https://codepen.io/Kseso">@Kseso</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kseso
Source: Code / Demo
Created on: MARCH 7, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

22. Fixed Image Backgrounds

See the Pen <a href="https://codepen.io/dropside/pen/DKaNXL"> Fixed image backgrounds</a> by Louis Coyle (<a href="https://codepen.io/dropside">@dropside</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Louis Coyle
Source: Code / Demo
Created on: MAY 11, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

23. Scrolling Fixed Background

See the Pen <a href="https://codepen.io/Ayra_Lux/pen/BdzgrJ"> Scrolling fixed background</a> by Maria Burlando (<a href="https://codepen.io/Ayra_Lux">@Ayra_Lux</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: maria Burlando
Source: Code / Demo
Created on: AUGUST 2, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

24. Responsive full screen background

See the Pen <a href="https://codepen.io/theiwaz/pen/rNGGvX"> Responsive full screen background</a> by theiwaz (<a href="https://codepen.io/theiwaz">@theiwaz</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: theiwaz
Source: Code / Demo
Created on: JULY 02, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

25. Background Attachment Fixed Within Container

See the Pen <a href="https://codepen.io/AliKlein/pen/dVrmVO"> Background Attachment Fixed within Container</a> by Ali Klein (<a href="https://codepen.io/AliKlein">@AliKlein</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ali Klein
Source: Code / Demo
Created on: OCTOBER 20, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

26. Parallax with background-attachment : fixed

See the Pen <a href="https://codepen.io/stefanjudis/pen/GRWMPb"> Parallax with background-attachment : fixed</a> by Stefan Judis (<a href="https://codepen.io/stefanjudis">@stefanjudis</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stefan Judis
Source: Code / Demo
Created on: MAY 28, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

27. CSS Fixed Backgrounds

See the Pen <a href="https://codepen.io/Hornebom/pen/GgBPaw"> CSS Fixed Backgrounds</a> by Hornebom (<a href="https://codepen.io/Hornebom">@Hornebom</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Hornebom
Source: Code / Demo
Created on: MARCH 05, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

28. Fixed Background Full Sections

See the Pen <a href="https://codepen.io/justinaven/pen/bdKPbO"> Fixed background full sections</a> by Justin Aven (<a href="https://codepen.io/justinaven">@justinaven</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Justin Aven
Source: Code / Demo
Created on: JULY 16, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

29. Simple background parallax scrolling in JavaScript

See the Pen <a href="https://codepen.io/juanbrujo/pen/NWPQdY"> Simple background parallax scrolling in JavaScript</a> by Jorge Epuñan (<a href="https://codepen.io/juanbrujo">@juanbrujo</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jorge Epuñan
Source: Code / Demo
Created on: MARCH 17, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

30. Infinito Web Design Studio – Portfolio Zipline

See the Pen <a href="https://codepen.io/ThiagoFerreir4/pen/eNMxEp"> Infinito Web Design Studio – Portfolio Zipline</a> by Thiago Ferreira (<a href="https://codepen.io/ThiagoFerreir4">@ThiagoFerreir4</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Thiago Ferreira
Source: Code / Demo
Created on: JULY 8, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

31. Pure CSS Background Image Scroll Effect

See the Pen <a href="https://codepen.io/carpenumidium/pen/LeOjKM"> Pure CSS Background Image Scroll Effect</a> by carpe numidium (<a href="https://codepen.io/carpenumidium">@carpenumidium</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: carpe numidium
Source: Code / Demo
Created on: JANUARY 6, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

32. Scrolling Backgrounds In CSS – Seattle Trip

See the Pen <a href="https://codepen.io/geoffgraham/pen/pbQaZX"> Scrolling Backgrounds in CSS – Seattle Trip</a> by Geoff Graham (<a href="https://codepen.io/geoffgraham">@geoffgraham</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Geoff Graham
Source: Code / Demo
Created on: AUGUST 09, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

33. Fixed Background Effect(Parallax Scrolling Effect)

See the Pen <a href="https://codepen.io/airen/pen/abYwbPG"> Fixed Background Effect(Parallax Scrolling Effect)</a> by 大漠 (<a href="https://codepen.io/airen">@airen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: @airen
Source: Code / Demo
Created on: JULY 22, 2022
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

34. Snazzy fixed backgrounds

See the Pen <a href="https://codepen.io/mitchdot/pen/nqpRyz"> Snazzy fixed backgrounds</a> by Mitch Pruitt (<a href="https://codepen.io/mitchdot">@mitchdot</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Mitch Pruitt
Source: Code / Demo
Created on: AUGUST 26, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

35. CSS Fixed Background Hero

See the Pen <a href="https://codepen.io/steveg_digital/pen/gdQmpY"> CSS fixed background hero</a> by Steve Gibbons (<a href="https://codepen.io/steveg_digital">@steveg_digital</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Steve Gibbons
Source: Code / Demo
Created on: SEPTEMBER 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

36. Fixed background image on iOS fix

See the Pen <a href="https://codepen.io/jakob-e/pen/QgJbVj"> Fixed background image on iOS fix</a> by Jakob Eriksen (<a href="https://codepen.io/jakob-e">@jakob-e</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jakob Eriksen
Source: Code / Demo
Created on: JULY 10, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

37. Background-Attachment Fixed

See the Pen <a href="https://codepen.io/Wendy-Ho/pen/gqEEpZ"> Background-attachment fixed</a> by Wendy (<a href="https://codepen.io/Wendy-Ho">@Wendy-Ho</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Wendy
Source: Code / Demo
Created on: FEBRUARY 20, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

38. Semi-Trans Overlay

See the Pen <a href="https://codepen.io/poojavpatel/pen/XeJmNG"> Semi-trans overlay</a> by Pooja Patel (<a href="https://codepen.io/poojavpatel">@poojavpatel</a>) on <a href="https://codepen.io">CodePen</a>. Author: Pooja Patel
Source: Code / Demo
Created on: SEPTEMBER 13, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS