6+ CSS Fixed Background Examples

This post contains a total of 6+ CSS Fixed Background Examples with Source Code. All these Fixed Backgrounds are made using CSS.

You can use the source code of these examples with credits to the original owner.

Related Posts

CSS Fixed Background Examples

1. By Jacob Potvin

Made by Jacob Potvin. Grid with Fixed Background. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
 <link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected]&display=swap" rel="stylesheet"> 
<style>
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  font-family: 'Roboto', sans-serif;
  background: #333;
  color: black;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

.container > div {
  height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  
  transition: all ease 0.5s;
}

.container > div:hover {
  transform: scale(0.98);
  opacity: .7;
}

div h2 {
  font-size: 2em;
  margin: 10px;
}

div p {
  font-size: 1.1em;
}

.container > div:nth-of-type(1) {
  grid-column: 1 / 3;
}

.container > div:nth-of-type(6) {
  grid-column: 3 / 5;
}

.container > div:nth-of-type(9) {
  grid-column: 3 / 5;
}

.container > div:nth-of-type(10) {
  grid-column: 1 / 3;
}



.bg-1 {
  background-image: url(https://i.postimg.cc/1RTV9F6V/filip-zrnzevic-Qs-WG0kj-PQRY-unsplash.jpg);
 
}

.bg-2 {
  background: url(https://i.postimg.cc/N04rYP7Q/henry-be-Iicyia-PYGGI-unsplash.jpg);
}
</style>
</head>
<body>
  <div class='container'>
  <div class='bg-1'>
    <h2>16 <span>| 24</span></h2>
    <p>Goals Completed</p>
  </div>
  <div class='bg-1'>
    <h2><i class="fas fa-battery-three-quarters"></i></h2>
    <p>Respiration</p>
  </div>
  <div class='bg-2'>
    <h2><i class="fas fa-running"></i></h2>
    <p>Miles</p>
  </div>
  <div class='bg-1'>
    <h2>36&deg; C</h2>
    <p>Temperature</p>
  </div>
  <div class='bg-1'>
    <h2><i class="fas fa-bed"></i></h2>
    <p>Sleep Keep</p>
  </div>
  <div class='bg-2'>
    <h2>98 BPM</h2>
    <p>Heart Rate</p>
  </div>
  <div class='bg-1'  style='color:#fff'>
    <h2>170 lbs</h2>
    <p>Weight</p>
  </div>
  <div class='bg-2'>
    <h2>28 <span>%</span></h2>
    <p>Fat Percentage</p>
  </div>
  <div class='bg-2'>
    <h2>118 mgdl</h2>
    <p>Blood Glucose</p>
  </div>
  <div class='bg-2'>
    <h2>680 kcal</h2>
    <p>AVG Consumption</p>
  </div>
  <div class='bg-2'>
    <h2><i class="fas fa-dumbbell"></i></h2>
    <p>Workout</p>
  </div>
  <div class='bg-2'>
    <h2>85 <span>%</span></h2>
    <p>Body Hydration</p>
  </div>
</div>
</body>
</html>

2. By Richard

Made by Richard. Webkit Clip with Fixed Background. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
html, body{ background: grey; }
p{ margin: 0px; }

#clip{
  /*
  Ensure background is added first
  */  
  background: linear-gradient(to bottom, #eee, rgba(222,112,6,0.2), #de7006),url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZlcnNpb249JzEuMScgd2lkdGg9JzQwMCcgaGVpZ2h0PSc0MDAnPgoJPGRlZnMgaWQ9J2RlZnM0Jz4KCQk8ZmlsdGVyIGNvbG9yLWludGVycG9sYXRpb24tZmlsdGVycz0nc1JHQicgaWQ9J2ZpbHRlcjMxMTUnPgoJCQk8ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgbnVtT2N0YXZlcz0nMScgYmFzZUZyZXF1ZW5jeT0nMC45JyBpZD0nZmVUdXJidWxlbmNlMzExNycgLz4KCQkJPGZlQ29sb3JNYXRyaXggcmVzdWx0PSdyZXN1bHQ1JyB2YWx1ZXM9JzEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDEgMCAwIDAgMCAwIDYgLTMuNzUgJyBpZD0nZmVDb2xvck1hdHJpeDMxMTknIC8+CgkJCTxmZUNvbXBvc2l0ZSBpbjI9J3Jlc3VsdDUnIG9wZXJhdG9yPSdpbicgaW49J1NvdXJjZUdyYXBoaWMnIHJlc3VsdD0ncmVzdWx0NicgaWQ9J2ZlQ29tcG9zaXRlMzEyMScgLz4KCQkJPGZlTW9ycGhvbG9neSBpbj0ncmVzdWx0Nicgb3BlcmF0b3I9J2RpbGF0ZScgcmFkaXVzPScxMCcgcmVzdWx0PSdyZXN1bHQzJyBpZD0nZmVNb3JwaG9sb2d5MzEyMycgLz4KCQk8L2ZpbHRlcj4KCTwvZGVmcz4KCTxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIHg9JzAnIHk9JzAnIGlkPSdyZWN0Mjk4NScgZmlsbD0nI2VlZWVlZScvPiAgICAgCgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyB4PScwJyB5PScwJyBpZD0ncmVjdDI5ODUnIHN0eWxlPSdmaWxsOiNlMDg3Mjg7ZmlsdGVyOnVybCgjZmlsdGVyMzExNSknIC8+Cjwvc3ZnPg==);
  
   background-attachment: fixed;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  
  font-size: 28vw;
  font-weight: bold;
  text-align: center;
}
</style>
</head>
<body>
  <p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
<p id="clip">FIXED</p>
  
</body>
</html>
 

3. By Brian Hayes

Made by Brian Hayes. Responsive Fixed Background. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
html::before {
  content: " ";
  display: block;
  background-image: url("https://images.unsplash.com/photo-1427694012323-fb5e8b0c165b");
  background-position: center;
  background-size: cover;
  height: 100vh;
  width: 100vw;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  z-index: -10;
}

html {
  font-family: "source sans pro";
  font-weight: 400;
  color: #fdfdfd;
}

h1, h2, h3 {
  font-family: lato;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 1px;
}

a {
  text-decoration: none;
  color: #FFC74E;
  transition: color 200ms ease-in-out;
}
a:hover, a:focus {
  color: #C84EFF;
}

hr {
  border: #555 1px solid;
}

.post {
  font-size: 1.125rem;
}

.content {
  max-width: 50rem;
  margin: 0 auto;
}

.post-header-inner {
  display: flex;
  flex-flow: column nowrap;
  min-height: 25rem;
  padding: 0.5rem 1.5rem;
  text-shadow: 0.5px 2px 2px rgba(1, 1, 1, 0.4);
}
.post-header-inner h1 {
  font-size: 2rem;
  color: #333;
}
.post-header-inner .post-date {
  color: #B28B36;
}
.post-header-inner .post-meta {
  width: 100%;
  margin-top: auto;
  color: #FFF;
  text-shadow: 1px 1.5px 4px rgba(1, 1, 1, 0.8);
}
.post-header-inner .author-name {
  font-size: 1.3rem;
  font-weight: 400;
}

.post-content {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
  padding: 1rem 1.5rem;
}

.note {
  color: #D3D3D3;
  border: 3px solid red;
  padding: 0.625rem;
}
.note span {
  font-weight: bold;
  color: red;
}

footer {
  padding: 1rem 1.5rem;
  background-color: #222;
  padding-bottom: 4rem;
}
</style>
</head>
<body>
  <header class="post-header">
    <div class="content post-header-inner">
      <h1>Heading</h1>
      <div class="post-meta">
      </div>
    </div>
  </header>
  
  <div class="post-content">
    <div class="content">
    <p> Add text to See The Fixed Background
    </p>
    <div>
  </div>
</body>
</html>

4. By Aakhya Singh

Made by Aakhya Singh. Fixed background with scrolling content. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans" rel="stylesheet">
<style>
@import url('https://fonts.googleapis.com/css?family=Quicksand');

html,body {
  height: 100%;
}

.wrapper {
  height: 100%;
  font-family: 'Quicksand', sans-serif;
  line-height: 1.5;
  word-spacing: 4px;
  letter-spacing: 1px;
}

.fixed-bg {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%; 
  width: 100%;
  color: white;
  text-align: center;
  display: table;
}

.fixed-bg h1 {
  display: table-cell;
  vertical-align: middle;
}

.scroll-bg {
  background-color: #0f0f0a;
  padding: 10px 70px;
  color: #676767;
}

/* first section */

.bg-1 {
  background-image: url('https://www.dl.dropboxusercontent.com/s/dk3s266jb5klmba/bg1.jpg');
}

/* third section */

.bg-2 {
  background-image: url('https://www.dl.dropboxusercontent.com/s/jcord1lxh30e02z/bg2.jpg');
}

/* fifth section */

.bg-3 {
  background-image: url('https://www.dl.dropboxusercontent.com/s/rsk15kp7azmsi27/bg3.jpg');
}
</style>
</head>
<body>
  <div class="wrapper"> <!-- wrapper div starts -->
  
  <div class="fixed-bg bg-1">
    <h1>Fixed Background scrolling</h1>
  </div>
  
  <div class="scroll-bg">
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
  </div>
  
  <div class="fixed-bg bg-2">
    <h1>Fixed Background scrolling</h1>
  </div>
  
  <div class="scroll-bg">
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3>
  </div>
  
  <div class="fixed-bg bg-3">
    <h1>Fixed Background scrolling</h1>
  </div>
  
</div> <!-- wrapper div ends-->
</body>
</html>

5. By Carlos Mendez

Made by Carlos Mendez. Alternating fixed/scrolling backgrounds Pure CSS. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
/* -------------------------------- 

Primary style

-------------------------------- */
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:after, *:before {
  box-sizing: border-box;
}

body {
  font-size: 100%;
  font-family: "Roboto", sans-serif;
  color: #3d3536;
  background-color: white;
}

body, html {
  /* important */
  height: 100%;
}
a {
  color: #a6989a;
}
/* -------------------------------- 

Modules - reusable parts of our design

-------------------------------- */
.cd-container {
  /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */
  width: 90%;
  max-width: 768px;
  margin: 0 auto;
}
.cd-container::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}

.cd-main-content {
  /* you need to assign a min-height to the main content so that the children can inherit it*/
  height: 100%;
  position: relative;
  z-index: 1;
}

.cd-fixed-bg {
  position: relative;
  min-height: 75%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  z-index: 1;
}
.cd-fixed-bg h1, .cd-fixed-bg h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  width: 90%;
  max-width: 1170px;
  text-align: center;
  font-size: 30px;
  font-size: 1.875rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  color: white;
}
.cd-fixed-bg.cd-bg-1 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg01.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg02.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg03.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/181085/track_riders_bg04.jpg");
}
@media only screen and (min-width: 320px) {
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 36px;
  }
}
@media only screen and (min-width: 480px) {
  .cd-fixed-bg {
    background-attachment: fixed;
  }
  .cd-fixed-bg h1, .cd-fixed-bg h2 {
    font-size: 48px;
    font-weight: 300;
  }
}

.cd-scrolling-bg {
  position: relative;
  min-height: 50%;
  padding: 4em 0;
  line-height: 1.6;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  z-index: 2;
}
.cd-scrolling-bg.cd-color-1 {
  background-color: #3d3536;
  color: #a6989a;
}
.cd-scrolling-bg.cd-color-2 {
  background-color: #3d3536;
  color: #a6989a;
}
.cd-scrolling-bg.cd-color-3 {
  background-color: #3d3536;
  color: #a6989a;
}
@media only screen and (min-width: 480px) {
  .cd-scrolling-bg {
    padding: 8em 0;
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 2;
    font-weight: 300;
  }
}
</style>
</head>
<body>
  <main class="cd-main-content">
		<div class="cd-fixed-bg cd-bg-1">
			<h1>Alternating fixed/scrolling backgrounds Pure CSS</h1>
		</div> <!-- cd-fixed-bg -->

		<div class="cd-scrolling-bg cd-color-2">
			<div class="cd-container">
				<p>
					Some text
          </p>
          <p>
         Some text
				</p>
			</div> <!-- cd-container -->
		</div> <!-- cd-scrolling-bg -->

		<div class="cd-fixed-bg cd-bg-2">
			<h2>The guy in the white leathers is me.</h2>
		</div> <!-- cd-fixed-bg -->

		<div class="cd-scrolling-bg cd-color-3">
			<div class="cd-container">
			  <p>
              Some text
				</p>
			</div> <!-- cd-container -->
		</div> <!-- cd-scrolling-bg -->

		<div class="cd-fixed-bg cd-bg-3">
			<h2>There I go again, leaning it over.</h2>
		</div> <!-- cd-fixed-bg -->

		<div class="cd-scrolling-bg cd-color-1">
			<div class="cd-container">
				<p>
					Some text
				</p>
			</div> <!-- cd-container -->
		</div> <!-- cd-scrolling-bg -->

		<div class="cd-fixed-bg cd-bg-4">
			<h2>Last shot is a knee dragger!</h2>
		</div> <!-- cd-fixed-bg -->
	</main> <!-- cd-main-content -->
</body>
</html>

6. By Kabir Singh

Made by Kabir Singh. Multiple Fixed Background Images. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body {
  margin:0 auto;
}
@import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,300);
.backgrounda {
  height: 720px;
	background: url(https://farm3.staticflickr.com/2814/11594633484_fec26e3603_b.jpg) no-repeat center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
	background-color: #1c120c;
	background-attachment:fixed;
	position:relative;
	overflow:hidden;
 }
.backgroundb {
  height: 720px;
	background: url(https://farm4.staticflickr.com/3715/11594635564_b21009cae6_b.jpg) no-repeat center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
	background-color: #1c120c;
	background-attachment:fixed;
	position:relative;
	overflow:hidden;
 }
.backgroundc {
  height: 720px;
	background: url(https://farm6.staticflickr.com/5524/11594323675_034ef063b6_b.jpg) no-repeat center fixed;
	-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
	background-color: #1c120c;
	background-attachment:fixed;
	position:relative;
	overflow:hidden;
 }
h1 {
  margin-top:110px;
  text-align:center;
  font-family: 'Alegreya Sans SC', sans-serif;
  font-weight:300;
  color:white;
  
}
</style>
</head>
<body>
  <div class="backgrounda">
  <h1>BACKGROUND 1</h1>
</div>
<div class="backgroundb">
  <h1>BACKGROUND 2</h1>
</div>
<div class="backgroundc">
  <h1>BACKGROUND 3</h1>
</div>
</body>
</html>

7. By Wendy

Made by Wendy. Background-attachment fixed. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <title></title>
<style>
body,
html,
main
{
  height: 100%;
  margin: auto 0;
  font-family: 'Raleway','Microsoft JhengHei';
}

.fixed-bg {
  min-height: 100%;
  background-size: cover;
  -webkit-background-size: cover !important; 
  -moz-background-size: cover !important; 
  -o-background-size: cover; 
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0 20px;
  line-height: 1.5;    
}

h1 {
  text-align: center;
  font-size: 3.5em;
  color: rgba(255, 255, 255, 1);
  text-shadow: 1px 1px 10px #000, 5px 5px 20px #000, 1px 0px 20px #def;
  opacity: 0.95;
}
img {
  width: 100%;
  height: auto;
}
.main-text {
  font-size: 5.5em;
  line-height:0px;
}
.sub-text{
  color:#fff;
  line-height:0px;
  text-shadow: 1px 1px 10px #000, 5px 5px 20px #000, 1px 0px 20px #def;
}
.text-box {
  background: rgba(255, 255, 255, 0.95);
  padding: 20px;
  margin: 0;
  max-width: 500px;
}
.fixed-bg h2 {
  font-size: 4em;
}
.fixed-bg p {
  text-align: center;
  max-width: 500px;
  font-size: 1.2em;
  text-align: left;
}

.bg-1 {
  background-image: url("https://images.unsplash.com/photo-1501621667575-af81f1f0bacc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
.bg-1-1 {
  background-image: url("https://images.unsplash.com/photo-1442406964439-e46ab8eff7c4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
.bg-2 {
  background-image: url("https://images.unsplash.com/photo-1504917595217-d4dc5ebe6122?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
.bg-2-1 {
  background-image: url("https://images.unsplash.com/photo-1521227439113-619913356230?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
.bg-3 {
  background-image: url("https://images.unsplash.com/photo-1455165814004-1126a7199f9b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
.bg-3-1 {
  background-image: url("https://images.unsplash.com/photo-1532186773960-85649e5cb70b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80");
}
.bg-4 {
  background-image: url("https://images.unsplash.com/photo-1496065187959-7f07b8353c55?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80");
}
</style>
</head>
<body>
  <main>
  <div class="fixed-bg bg-1">
    <h1 class="main-text">iPASP</h1>
    <p class="sub-text">Background-attachment fixed</p>
  </div>
  <div class="fixed-bg bg-1-1">
    <div class="text-box">
      <h2>Title</h2>
      <p>
        Text
      </p>
      <img style="-webkit-user-select: none;" src="https://images.unsplash.com/photo-1449157291145-7efd050a4d0e?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80">
      <p>
        Text
      </p>
    </div>
  </div>
  <div class="fixed-bg bg-2">
    <h1>Heading</h1>
  </div>
  <div class="fixed-bg bg-2-1">
    <div class="text-box">
      <h2>Title</h2>
      <p>
        Text
      </p>
      <img src="https://images.unsplash.com/photo-1496247749665-49cf5b1022e9?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=1353&amp;q=80">
      <p>
        Text
      </p>
      <p>
        Text
      </p>
      <p>
        text
      </p>
      <p>
        Text
      </p>
      <img src="https://images.unsplash.com/photo-1505424297051-c3ad50b055ae?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80">
      <p>
        Text
      </p>
      <p>
        Text
      </p>
      <p>
        Text
      </p>
      <p>
        Text
      </p>
    </div>
  </div>
  <div class="fixed-bg bg-4">
    <h1>Heading</h1>
  </div>
  <div class="fixed-bg">
    <h2>Thank You</h2>
    <p>
      Some text
    </p>
  </div>
</main>
</body>
</html>