Skip to content

Instantly share code, notes, and snippets.

Created March 9, 2018 12:37
Show Gist options
  • Save anonymous/280f89b0270a8f59e8773f2a2d83a263 to your computer and use it in GitHub Desktop.
Save anonymous/280f89b0270a8f59e8773f2a2d83a263 to your computer and use it in GitHub Desktop.
Playing with background-attachment
/**
* Playing with background-attachment
*/
pre {
max-height: 150px;
border: 1px solid silver;
overflow: auto;
background: url('http://via.placeholder.com/350x150');
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-vertical","fontsize":"110","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment