Fixed background image to bottom of page

Question

I try to start the background image and stay in a fixed position, but only until the rest of the "content" of the page is complete, after which the full image will be shown.

I am working on a purely CSS solution. I should note that the image is larger than most (laptop) screens.

In particular, the code I used here is used:

body { background:$bgcolor; background-image:url('http://i.imgur.com/cIGSehG.jpg'); background-repeat:no-repeat; background-position:0px 72px; background-attachment:fixed; margin:0; ... } 

The image I'm using is shown in url() :

The effect I'm looking for will mainly display only about 10% of the grass hill, while you look at most of the page, but if you finally scroll all the way to the contents of the page, the remaining 90% of the grass hill will be shown.

I could not find it anywhere, but I may have simply used bad search terms, since I am not very familiar with jargon.

Answer 1

Well, that was one gnarled nut! For this, I came up with a not so stable trick. I don’t have time to develop it now, but maybe it could be a working concept.

Core contept

Providing a large and empty footer area in which the user is likely to hover when reaching the bottom of the page, we use the sibling selector to reposition its sibling element containing the background:

 #footer:hover ~ #background { background-position: center bottom; } 

Along with a few quirks (which should be improved), we can achieve the parallax effect.

Go fiddle

Check out this JFiddle (in Chrome) to see and play with it.