scrolling text over static image css

Question

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.

score 1 · Accepted Answer · answered Mar 28 '14 at 01:58

<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

overflow:scroll; adding the above has fixed it in my case. thanks a lot! — virmantas, Mar 28 '14 at 02:19

newTag · Answer 2 · 2014-03-28T02:12:16.133

0

Use

background-attachment: fixed;

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

Use background-attachment instead of background-position.

See demo

edited Mar 28 '14 at 02:12

answered Mar 28 '14 at 02:00

newTag

2,149
1
22
31

score 0 · Answer 3 · edited May 23 '17 at 11:58

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"

edited May 23 '17 at 11:58

Community

1
1

answered Mar 28 '14 at 02:02

pj013

1,393
1
10
28

score 0 · Answer 4 · answered Jun 10 '22 at 17:21

0

use "background-attachment: fixed;" in your css

answered Jun 10 '22 at 17:21

Sachini Amarasinghe

45
5

This answer was already given. What is new? – Vega Jun 12 '22 at 08:13
If you have a new question, please ask it by clicking the [Ask Question](https://stackoverflow.com/questions/ask) button. Include a link to this question if it helps provide context. - [From Review](/review/late-answers/31991541) – Uttam Nath Jun 13 '22 at 14:40

score -2 · Answer 5 · edited Aug 07 '21 at 12:57

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

edited Aug 07 '21 at 12:57

Ole Pannier

3,208
9
22
33

answered Mar 28 '14 at 01:58

user1329482

569
3
8

score -2 · Answer 6 · edited Mar 28 '14 at 05:16

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

edited Mar 28 '14 at 05:16

Flexo

87,323
22
191
272

answered Mar 28 '14 at 03:20

Suresh

1

scrolling text over static image css

6 Answers6