Alternate Fixed & Scroll Backgrounds

Alternate Fixed & Scroll Backgrounds

How to create alternate fixed and scroll backgrounds with no javascript, but just the help of the CSS background-attachment property set on Fixed.

Nucleo icons

Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!

All the resources available on CodyHouse are released under the BSD-3-Clause license. You can support our project with a Paypal donation 🙌

These days we see a lot of parallax effects in web projects. You can achieve some dynamic results with CSS only, without affecting the website performance. Unless you have to use parallax on background images to make your client happy - which sometimes happens.  All you need to learn is how the CSS background-attachment property works. Let's build this snippet together ;)

Demo images from Unsplash.

Creating the structure

The HTML is quite basic: we alternated <div> elements with a .cd-fixed-bg class - used for the sections with fixed backgrounds - with divs with a .cd-scrolling-bg class - used for the sections with plain backgrounds.

<main>
   <div class="cd-fixed-bg cd-fixed-bg--1">
      <h1><!-- title goes here --></h1>
   </div> 

   <div class="cd-scrolling-bg cd-scrolling-bg--color-2">
      <div class="cd-scrolling-bg__content">
         <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
         </p>
      </div> 
   </div> 
</main>

Adding style

When I was thinking about how to achieve this effect, my first thought was to play with JavaScript: maybe I should create a <div> in position fixed, and use it to change the background image while the user scrolls. Felt too complicated though. I hadn't considered the Fixed value of the CSS background-attachment property. By default the background-attachment value is Scroll, meaning that the background scrolls along with the element. BUT if you set it to be Fixed, the background behaves as a fixed positioned element: it moves with regards to the viewport.

That's it! Few lines of CSS and we have a nice template suitable for long one-page designs ;)

.cd-fixed-bg {  
  min-height: 100vh;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}

.cd-fixed-bg.cd-fixed-bg--1 {
  background-image: url("../img/cd-background-1.jpg");
}

.cd-fixed-bg.cd-fixed-bg--2 {
  background-image: url("../img/cd-background-2.jpg");
}

.cd-fixed-bg.cd-fixed-bg--3 {
  background-image: url("../img/cd-background-3.jpg");
}

.cd-fixed-bg.cd-fixed-bg--4 {
  background-image: url("../img/cd-background-4.jpg");
}

.cd-scrolling-bg {
  min-height: 100%;
}

Join our newsletter

Get our monthly recap with the latest CodyHouse news