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.
CSS position property is used to set the position of text over an image. This can be done by enclosing the image and text in an HTML “div”. Then make the position of div “relative” and that of text “absolute”. The absolute elements are positioned relative to their parent (div).
To make a scrolling image we can use the CSS animation property (to apply an animation to the element) along with the @keyframes rule (to define the animation). Here, we're actually making the inner <div> element scroll. This element contains the image so the image scrolls too.
Set the overflow-y: hidden; and overflow-x: auto; that will automatically hide the vertical scroll bar and present only the horizontal scrollbar. The white-space: nowrap; property is used to wrap text in a single line. Here the scroll div will be horizontally scrollable.
<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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With