center bk-gnd scroll compensate

Vote count:

0

I am having trouble with centering a background behind a div. I have made a fiddle showing how the background image stays center whilst the browser window is resized, which is great, but if the scrollbar is moved down so to view the bottom of the green div, the back ground follows the scroll, so is no long centered, which I am trying to avoid. I hope for the center text of the bk-gnd image to remain central in the view port at all times, whether resizing the screen or scrolling, is this possible?

here is the interactive fiddle : http://ift.tt/1jykJ64

css code:

html, body {
height: 100%;
margin: auto;

}

#bk-gnd-div {
height: 100%;
background-image:url('http://ift.tt/Q96TyQ');
margin: auto;
background-repeat: no-repeat;
background-position: center center;
background-color: #9FBBE2;

}

the other div code is on the fiddle, stackoverflow is saying it is not formatted correctly and wont let me post it? maybe this is a clue?

thank you, any help would be great : )

asked 2 mins ago

user3434591

1