css image fixed horizontally absolute vertically - html

Question

I currently have an image in a div that's set to fixed, and I like how its behaving, however I want it also to behave as if it's absolute when scrolling up and down. So in other words, I want fixed behavior horizontally, but absolute vertically (so that I add content to it and can scroll down and see the whole image).
Hopefully, I'm clear. Heres my html:
<div id="graphpaper">
<img src="Background2.jpg" />
</div>
My css:
#graphpaper{
position:fixed;
left:50%;
margin-left:-800px;
width:1600px;
height:1600px;
z-index:-10;
}

Answer 1

This is not an easy topic. The only way to achieve it is to use javascript. You have to 2 ways to do this.
Use position fixed and hook to windows scroll event and change the vertical position with javascript on scroll
Use position absolute (so the image scrolls with the window) and again with javascript on horizontal scroll change the horizontal location.
A basic example (it won't work, but this is what you need to start with):
$(window).scroll(function(){
$('#fixedImage').css('top', $(window).scrollTop());
});

Answer 2

Thanks for your help. I found the solution: This essentially will move the fixed div up (notice the negation sign in front of scrollVar) which will resemble an absolute scrollable behavoir.
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
if ( scrollVal >= 0) {
$('#graphpaper').css({'position':'fixed','top' :-scrollVal});
}
});
});