Any way to fix the position of image

Question

I have an image on the left hand side and text on right side. Like two column layout.

I want that when i scroll the text then the image should stay at center of page.

I tried using

position:fixed

But then the problem, sometimes when i resize the IE window to small size then the image stay at same position and it comes out of the main content area when i scroll down.

I want that image should scroll but should stay within the content area . It should not move outside the main content area.

Answer 1

.content{ position: relative }
.image{ position: absolute; top: 0; left: 50%; }

<div class="content">
   <div class="image">
      <img src="image.jpg" />
   </div>
</div>