How to make image stay inside the div box on scrolling

I have the image position fixed inside div and code is gven below

#content{
margin-top:100px; 
width:900px; 
color:#009;
border:1px solid red;
overflow:hidden;
display:block;

}
img {
float:left; 
position:fixed;
top:140px;
padding:50px;
}
#text{
 display:block;
border:1px solid green; 
width:500px; 
height:1200px;
float:right; 
overflow:scroll;
}
#footer{
 clear:both;
 width:600px;
 开发者_JAVA技巧height:300px;
 border:2x solid blue;
 color:#939; 
}

HTML is

<div id="content" >
<img src="bar.jpg" width="46" height="639" /> 
<div id="text">
ggggggggggggggggggfgdfgdfgdgdfgdgdfgdf
</div>
</div>


<div id="footer">

Footer text
</div>
</body>

Now when i scroll down then image comes out of the content div box. IS there any way so that even if i scroll the image bar should stay inside the div box.

The screen shot shows my problem First Screen is ok without scrolling

alt text http://img293.imageshack.us/img293/8640/bar1k.png

But when i scroll the text full then it covers my footer as well

alt text http://img36.imageshack.us/img36/4393/bar2z.png

 I want that image should scroll with the scroll bar but it should not come outside the div box . Is that possible. Basically the div box should be the boundary of the image. THe image should not come out of the div box any time but it should scroll in between that with the length of div box

so you want that blue bar to stay within the red box, right?

if that's the case you need to have the css for the blue box as

img {
 position: absolute;
 top:140px;
 left:50px;
}

and also the container has to have

#content{
 ...
 position: relative;
}

position: relative will make the blue bar absolutely positioned with respect to #content rather than the document object.

position: fixed positions your image relative to browser window

If you want to position it relative to the parent div, you should use position: absolute

position: fixed

Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

In other words you can't "fix" your image inside of div only relative to browser window.

Follow-up:

If you want that image to always be on the same place in the background do it with CSS:

body {background: transparent url(bar.jpg) bottom left no-repeat; 
      background-attachment:fixed}

from what i see, just remove the position: fixed from your img tag styles

img {
    float:left;
    padding:50px;
}

I dont know if is just because you made a quick demo to show us, but never apply a style to a tag, its better to use ID's or Classes

if you want to keep a margin of 140 pixels from the top of the div containing the image, use:

img {
    margin-top: 140px;
}