Skip to content

Instantly share code, notes, and snippets.

@jdanyow jdanyow/index.css

forked from LeaVerou/dabblet.css
Created Jul 3, 2020
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% }
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>GistRun</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<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>
</body>
</html>
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.