Skip to content

Instantly share code, notes, and snippets.

@parkr
Created May 13, 2012 20:42
Show Gist options
  • Save parkr/2690086 to your computer and use it in GitHub Desktop.
Save parkr/2690086 to your computer and use it in GitHub Desktop.
Scroll text behind container
/**
* Scroll text behind container
*/
body { background-color: #cccccc; font-size: 2em; }
#content { background-color: #dddddd; height: 600px; width: 100%; overflow: hidden; }
#text_container {
background-color: transparent;
border-top: 40px transparent solid;
border-bottom: 40px transparent solid;
border-left: 40px transparent solid;
border-right: 40px transparent solid;
position: relative;
overflow-y: scroll;
overflow-x: hidden;
height: 520px; // =(height of #container) - (width of border-top) - (width of border-bottom)
width: 720px; // = (width of base.png) - (width of border-left) - (width of border-right)
}
#main_text {
background-color: #eee;
min-height: 1000px;
}
<!-- content to be placed inside <body>…</body> -->
<div id="content">
<div id="text_container">
<div id="main_text">lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
lalalalalalalalal
</div>
</div>
</div>
{"view":"split-vertical","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