Fixed background image until bottom of page

Question

I'm trying to get a background image to start and stay in a fixed position, but only until the rest of the 'content' of the page is finished, at which point the full image is displayed.

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

Specifically, here's the code that I've been using:

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 that I'm using is given in the url():

Background image from snippet

The effect that I'm looking for is basically the image will display only about the top 10% of the grass hill while you're looking at most of the page, but if you finally scroll all the way down past all the page content, the remaining 90% of the grass hill will be shown.

I couldn't find this anywhere, but I may have just been using poor search terms since I'm not so familiar with the lingo.

You need to use jquery to find the scroll position and then change the css accordingly. — Libin, Mar 10 '13 at 15:33
Do you want the exposition to be sudden, or gradual from the scrolling? — Albert Xing, Mar 10 '13 at 16:37
Sorry, good question - I'm hoping for it to be sudden, such that the image is totally static until you reach the very bottom of the page. — Free, Mar 10 '13 at 17:20
@Free It probably isn't applicable to your project, but was my answer of any interest to you? Cheers. — Alexander Wallin, Mar 13 '13 at 20:22

score 1 · Accepted Answer · answered Mar 11 '13 at 15:46

Well, this was one jiggy nut! I did come up with a not so stable trick to achieve this. I don't have time to develop it any more right now, but perhaps it might be a working concept.

Main contept

By providing a large and empty footer area that the user is likely to hover when reaching the bottom of the page, we use a sibling selector to change the position of its sibling element containing the background:

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

Along with a few quirks (which ought to be improved) we can achieve a parallax effect.

Go Fiddle

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

Fixed background image until bottom of page

1 Answers1

Main contept

Go Fiddle