<div class="g-container">
    <h2>background-attachment: scroll;</h2>
    <div class="g-bgat-scroll">
        <div class="g-content">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
            <p>10</p>
            <p>1</p>
        </div>
    </div>
    
    <h2>background-attachment: fixed;</h2>
    <div class="g-bgat-fixed">
        <div class="g-content">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
            <p>10</p>
            <p>1</p>
        </div>
    </div>
    
    <h2>background-attachment: local;</h2>
    <div class="g-bgat-local">
        <div class="g-content">
            <p>1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
            <p>5</p>
            <p>6</p>
            <p>7</p>
            <p>8</p>
            <p>9</p>
            <p>10</p>
            <p>1</p>
        </div>
    </div>
</div>
$img: 'https://picsum.photos/600/200?random=5';

.g-container {
    width: 600px;
    margin: 0px auto;
    padding: 0 0 20px 0;
}

h2 {
    text-align: center;
    padding: 60px 0 10px;
    font-size: 20px;
}

p {
    text-align: center;
    padding: 10px 0;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 3px #000;
}

.g-bgat-scroll {
    height: 200px;
    border: 1px solid #000;
    overflow-x: hidden;
    overflow-y: scroll;
    background-image: url($img);
    background-size: cover;
    background-attachment: scroll;
}

.g-bgat-local {
    height: 200px;
    border: 1px solid #000;
    overflow-x: hidden;
    overflow-y: scroll;
    background-image: url($img);
    background-size: 100% cover;
    background-attachment: local;
}

.g-bgat-fixed {
    height: 200px;
    border: 1px solid #000;
    overflow-x: hidden;
    overflow-y: scroll;
    background-image: url($img);
    background-size: 100% cover;
    background-attachment: fixed;
}

::-webkit-scrollbar {
  width: 10px;
  background-color: #aaa; /* or add it to the track */
}

/* Add a thumb */
::-webkit-scrollbar-thumb {
  background: #fff;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.