Jump to content

Single image background move fixed to height of page

Recommended Posts

Hello all, I'm after some help.

I have a moderate length one page design website. I have an image background from a poster that I would like to fit the width of the page, but then scroll as a % of the height of page.

ie the page loads and the background image is say 20% of its height visible, as the user starts to scroll, and reaches the bottom of the web page, the background image is then fixed at the bottom. However, the web page and the background image are not the same size. The only requisites are that the background image fits full width of the web page, and that when at the top of the page, the background image is at the top and when the page is scrolled to the bottom, the image is at the bottom of its scroll.

So for instance a 1200x800 image on a desktop page that is 1200x1600 would need to scroll at a 50% speed so that it fits the above requirement. These are made up dimensions.

Link to post
Share on other sites

CSS wouldn't be able to do it. You will need to do some math and write a Javascript program to determine where to place the image. It takes some work so there's no short code snippet that could be provided.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...