1. The background-attachment CSS property sets whether a background image's position is
   1. fixed within the viewport
   2. scrolls with its containing block
2. Values
   1. fixed
      1. The background is fixed relative to the viewport
      2. Even if an element has a moving mechanism, the background doesn't move with the element
   2. local
      1. The background is fixed relative to the element's contents
      2. If the element has a scrolling mechanism, the background scrolls with the element's contents, and the background painting area and the background positioning area are relative to the scrollable area of the element rather than to the border framing them
   3. scroll
      1. The background is fixed relative to the element itself and does not scroll with its contents
      2. It is effectively attached to the elements's border

CSS

    #bg_image {
        background-image: url("../images/mySailingBoat.webp");
        background-repeat: no-repeat;
        background-position: center;
    }

    .fixed {
        background-attachment: fixed;
    }
                        

HTML

<div id="bg_image" class="fixed">
    <div>
        <img src="../images/myOrangeStrip.png" 
            width="25px" height="100%" alt="orange square">
    </div>
    <div>
        <img src="../images/myGreenStrip.png" 
            width="25px" height="100%" alt="orange square">
    </div>
    <div>
        <img src="../images/myOrangeStrip.png" 
            width="25px" height="100%" alt="orange square">
    </div>
    <div>
        <img src="../images/myGreenStrip.png" 
            width="25px" height="100%" alt="orange square">
    </div>
    <div>
        <img src="../images/myOrangeStrip.png" 
            width="25px" height="100%" alt="orange square">
    </div>
    <div>
        <img src="../images/myGreenStrip.png" 
            width="25px" height="100%" alt="orange square">
    </div>
</div>