Using text as a background instead of image on html page
I'm trying to use text as a background image for a site - it's fine if the text reflows automatically, but I'm trying to not scroll the page - so on my body I have overflow:hidden, which works fine, unless my content div gets too long, at which point it is hidden too.
Is there a way to make the "background" layer overflow:hidden, while letting my content flow as necessary? (I've tried the obvious overflow:hidden on #background)
<body>
<div id="content">
All my content
</div>
<div id="background">
<p>'I told some of yo... lots of text</p>
</div>
</body>
is the basic page format so far and the css is:
body {overflow:hidden;}
#background {
position:absolute;
top:-20px;
right:-20px;
bottom:-20px;
left:-20px;
overflow:hidden;
z-index:-1;}
#content {
width:840px;
text-align:left;
margin-top:30px;
margin-left:auto;
开发者_开发问答margin-right:auto;
height:auto;
overflow:visible;}
Make #background position fixed and set the overflow:hidden to it, not the body.
body {}
#background {
position:fixed;
top:0;
left:0;
width:95%;
height:95%;
overflow:hidden;
z-index:-1;
}
Example: http://jsfiddle.net/AlienWebguy/Av6YW/
加载中,请稍侯......
精彩评论