6

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.

CRABOLO
  • 8,495
  • 38
  • 39
  • 67
virmantas
  • 63
  • 1
  • 1
  • 4

5 Answers5

1
<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

airi
  • 585
  • 5
  • 19
0

Use

background-attachment: fixed;

http://www.w3.org/TR/CSS21/colors.html#background-properties

Use background-attachment instead of background-position.

See demo

newTag
  • 2,119
  • 1
  • 21
  • 30
0

I think this has got more to do with the position attribute, Is your text also enclosed in the wrapper?

You could maybe refer this and get a more clear picture: Difference between style = "position:absolute" and style = "position:relative"

Community
  • 1
  • 1
pj013
  • 1,360
  • 1
  • 10
  • 26
-2

I believe background-attachment: fixed should resolve the issue. Of course, it's not really a matter of belief, but MDN appears to say this.

Etienne Kaiser
  • 2,634
  • 8
  • 19
  • 29
user1329482
  • 569
  • 3
  • 8
-2

Use this CSS instead, to prevent the image from tiling, and to make the text scroll over it:

background: url('your_background.jpg') no-repeat fixed;
Flexo
  • 84,884
  • 22
  • 182
  • 268
Suresh
  • 1