Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Playing with background-attachment
/**
* Playing with background-attachment
*/
pre {
max-height: 150px;
border: 1px solid silver;
overflow: auto;
background: url('http://placekitten.com/200/200');
color: white;
text-shadow: 0 -.1em .1em black;
}
.scroll { background-attachment: scroll; }
.fixed { background-attachment: fixed; }
.local { background-attachment: local; }
body { padding: 10% }
<p>Scroll the individual containers as well as
the page itself. Observe the differences</p>
<pre class="scroll">
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll<br>
background-attachment: scroll
</pre>
<pre class="fixed">
background-attachment: fixed<br>
background-attachment: fixed<br>
background-attachment: fixed <br>
background-attachment: fixed <br>
background-attachment: fixed <br>
background-attachment: fixed <br>
background-attachment: fixed <br>
background-attachment: fixed <br>
background-attachment: fixed <br>
background-attachment: fixed <br>
background-attachment: fixed <br>
background-attachment: fixed
</pre>
<pre class="local">
background-attachment: local <br>
background-attachment: local <br>
background-attachment: local <br>
background-attachment: local <br>
background-attachment: local <br>
background-attachment: local <br>
background-attachment: local <br>
background-attachment: local <br>
background-attachment: local <br>
background-attachment: local <br>
background-attachment: local <br>
background-attachment: local
</pre>
MOAR content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
content<br>content<br>content<br>
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.