<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: 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>
    
    <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>
</div>
$img: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1533565295933&di=4a1a94e76121bff62abc53348d189036&imgtype=0&src=http%3A%2F%2Fimgsrc.baidu.com%2Fimgad%2Fpic%2Fitem%2F8644ebf81a4c510f655550ce6a59252dd52aa555.jpg';

.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: 20px;
}

.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;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.