<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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.