37+ CSS Fixed Backgrounds

A hand-picked collection of free 30+ HTML and CSS fixed backgrounds for web designer, web developer, or a UI/UX professionals.

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