sticky Background

I don't think it will be possible to show the top of the beach with the background set to fixed, unless your image has space above it.

For example, try this CSS:

#generate-section-1 {
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center 200px;
}

The 200px will push the top of the image down into view, but as you scroll you'll notice the extra spacing.

Making a background image fixed attaches it to the entire area of the screen in the background, so the beach will always go right to the top since it's the top of the image.

Hello Tom - sorry for my late reply and thanks for your answer.

Your code helped me to understand background a bit better.
In the coming days i will try to use the waypoints.js to change the background position as you scroll the page.
I thought it would be easy since there was already a "stricky" attribute for "position" useable with some browsers but it seems a bit more complicated^^
I will let you know if i find a solution.

Have a nice day.

You too! :)