html - Positioning scrolling divs -

I have come to you once again for a question. I found a logo with three elements: text | Logo | Lesson The logo part is stable. It should always be horizontally + vertical centered. I've completed it with the background need to be able to scroll up and down two text parts and when it leaves the page from the top of the page, then a new version should come up from the bottom of the page and stop at this point

I have to work entirely on my desktop which is a 1920 * 1080 resolution However, I have padded this tray and pixel

#logo {background: none; Padding-top: 411px; } # Logo 2 {background: none; Padded-top: 958px; } # Logo 3 {Background: none; Padding-top: 962px; }

Obviously this is not the way to go after alignment completely after any other resolution.

I have created a JSFiddle:

Since Fell shows output in a small screen, you already see my problem. I am pretty sure there is something missing here. Is there anybody who can point me in the right direction how to pull it?

Kind regards, please

Try one for this:

I set the height of the 100% viewport ( html , body , and .container-fluid from # section after setting it to 100% height). Again I made every #logo with an upper height of up to 50% (about) half the height of the image offset from the top. I made some funky adjustments to set the last #logo to the viewport height, so the scrollbar closes at the bottom of the window on three three. Here's CSS (slightly reorganized):

  html {height: 100%; } Body {Background: URL fixed (http://i.imgur.com/5rFLWpS.png) repetitive center center; -WebKit-Background-Size: Cover; -MOZ-BACKGROUND-SHAPE: COVER; -o-background-shape: cover; Background size: cover; Height: 100%; }. Container-Fluid (height: 100%; width: 100%;} #sectionone, #sectiontwo, #sectionthree {height: 100%; width: 100%;} #lolo {background: none; position: full; top: 50%; margin-top: -72px;} # logo 2 {background: none; position: full; top: 150%; margin-top: -72px;} # logo 3 {background: none; position: Full; top: 250%; margin-top: -72px; bottom: 300%; margin-down: -72px;}