Skip to content

Instantly share code, notes, and snippets.

@jdanyow

jdanyow/index.css

Forked from LeaVerou/dabblet.css
Created July 3, 2020 03:09
Show Gist options
  • Save jdanyow/96af833ea3468649a659ef69b4a22082 to your computer and use it in GitHub Desktop.
Save jdanyow/96af833ea3468649a659ef69b4a22082 to your computer and use it in GitHub Desktop.
Download ZIP
Playing with background-attachment
Raw
index.css
/**
* 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% }
Raw
index.html
<!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