CodePen Embed - CSS

Live
​x
 
<html>
  <head>
    <title>Attachment</title>
    <style>
      div {
        height: 300px;
        margin: 20px;
        border: 3px dashed red;
        background-image: url(https://cdn.pixabay.com/photo/2020/02/05/06/24/cat-4820202_960_720.jpg);
      }
​
      div.one {
        /* Domyślna wartość - scrollowanie z całym oknem. */
        background-attachment: scroll;
      }
      div.two {
        /* Tło zostaje nieruchome. */
        background-attachment: fixed;
      }
​
      p {
        max-height: 150px;
        line-height: 400%;
        overflow: auto;
        background-image: url(https://cdn.pixabay.com/photo/2020/02/05/06/24/cat-4820202_960_720.jpg);
        background-size: 500px;
        color: white;
      }
    </style>
  </head>
  <body>
    <pre>background-attachment: scroll 👇</pre>
    <div class="one"></div>
    <pre>background-attachment: fixed 👇</pre>
    <div class="two"></div>
    <section style="margin: 40px">
      <span>
        Scrollowalne elementy na stronie 👇
      </span>
​
      <!-- Tło utrzymane jako nieruchome podczas przewijania
        zawartości tagu <p> ale ruchome podczas przewijania strony. -->
      <p style="background-attachment: scroll">
        background-attachment: scroll<br />
        background-attachment: scroll<br />
        background-attachment: scroll<br />
        background-attachment: scroll<br />
        background-attachment: scroll<br />
        background-attachment: scroll
      </p>
​
      <!-- Tło utrzymane jako nieruchome podczas przewijania
        zawartości tagu <p> oraz podczas przewijania strony. -->
      <p style="background-attachment: fixed">
        background-attachment: fixed<br />
        background-attachment: fixed<br />
        background-attachment: fixed <br />
        background-attachment: fixed <br />
        background-attachment: fixed <br />
        background-attachment: fixed
      </p>
​
      <!-- Tło ruchome podczas przewijania
        zawartości tagu <p> oraz podczas przewijania strony. -->
      <p style="background-attachment: local">
        background-attachment: local <br />
        background-attachment: local <br />
        background-attachment: local <br />
        background-attachment: local <br />
        background-attachment: local <br />
        background-attachment: local
      </p>
    </section>
  </body>
</html>
​
This Pen is owned by frontstack on CodePen.
See more by @frontstack on CodePen
External CSS

This Pen doesn't use any external CSS resources.
External JavaScript

This Pen doesn't use any external JavaScript resources.