• 2021-06-01

    Parallax scroll images with pure CSS

    Author

    Comments

    Start a discussion

    It's not hard to create a parallax scroll image with CSS. Just add background-attachment: fixed; to it.

    Scroll down to see the effect.

    HTML

    <div class="wrap">
      <div class="image"></div>
    
    <p>
    Pudding ice cream tart danish chocolate cake liquorice powder bonbon tiramisu. Bonbon dragée jujubes caramels dragée cake donut donut. Topping bonbon sweet tiramisu jelly-o brownie. Gummies topping tootsie roll sesame snaps dragée cupcake fruitcake dragée pastry.</p>
    
    <div class="image"></div>
    
    <p>
    Dragée cake jelly beans cake pie tootsie roll cake oat cake candy canes. Gingerbread pastry apple pie cookie chocolate cake. Marzipan brownie ice cream topping.</p>
    </div>

    CSS

    .image {
      background-image: url("http://csspoo.com/images/v.jpg");
      height: 100px;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    .wrap {
      height: 200px;
      width: 200px;
      overflow-y: auto;
    }
    
    p {
      margin: 1rem 0;
    }

    Sources