scrolling text over static image css
css
Solution
<style>
#test {
background-image: url(./images/grad.gif);
background-attachment: fixed;
/*
the three following items below do the following:
a) fix the width and height of the containing div
to be smaller than the width and height of the content.
b) we set the overflow style so that when the content is
bigger than the containing element scroll bars appear
to allow users to scroll the element contents.
*/
height:200px;
width:300px;
overflow:scroll; }
</style>
<div id="test">
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
<div style="border:3px solid white; margin:20px; width:80%">
test test test test test test test test test <br/>
test test test test test test test test test <br/>
test test test test test test test test test <br/>
test test test test test test test test test <br/>
</div>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
test test test test test test test test test test test <br/>
</div>
More Info : http://www.codertools.com/css_help_guide/css_background-attachment.aspx
Problem
How do I make background image stay static and scroll only text? ``` #wrapper{ height: 100%; width: 100%; background-image: url('background.jpg'); background-size: 100%; background-position: fixed; } ``` That's my styling for the background, but it still scrolls leaving white space below until the text reaches the bottom. I've been googling for this for an hour now. It's my first attempt working with css so please don't be harsh on me.