Header image "over scrolls" on page

[sylhare]

The image overscroll on the page, so instead of the image being blocked at its end, it continues going down as I scroll. It should stop scrolling at the bottom of the image.

Plus the background: no-repeat; was not set on the page layout.

[sylhare]

That's because when you resize the windows the header image size changes.

[sylhare]

The complexity comes from the bacground-size of the background-image in the div that is set to cover. So the ratio is always moved based on the size of the window.
The actual size of the background-image is a bit tricky to get, but possible.

However I did not wanted to have multiple javascript functions for that, so instead I have adjusted the background-size based on the size of the screen so it matches the scrolling pace at all time.
It seems to work on big images, but my trick won't work on smaller images...

Might be improved later, but good for now.