# Fixing fixed As it turns out, Paul’s solution for JSConf’s site was exactly what we needed on our own homepage: the background image just needed its own element so it could move independently of the others. Look at the two versions of the code. It happens to be SCSS but there is nothing too special going on. You could make the same changes in …

fixed.scss

.what-we-do-cards {
  @include clearfix;
  border-top: 10px solid rgba(255, 255, 255, .46);
  color: $white;
  padding-bottom: 4em;
  overflow: hidden; // added for pseudo-element
  position: relative; // added for pseudo-element

  // Fixed-position background image
  &::before {
    content: ' ';
    position: fixed; // instead of background-attachment
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: white;
    background: url('/img/front/strategy.jpg') no-repeat center center;
    background-size: cover;
    will-change: transform; // creates a new paint layer
    z-index: -1;
  }
}