user2644819 user2644819 - 7 months ago 10
HTML Question

Full background/borders filled with parallax scrolling

I am absolutely new to HTML and CSS so i was hoping someone could point me in the right direction. I am trying to understand this tutorial to make parallax scrolling websites:
http://ihatetomatoes.net/simple-parallax-scrolling-tutorial/

but i notice it comes with normalize.css which makes each image expand to fit the browser perfectly. I am not sure which part of it makes it work to do that properly, i was hoping someone could point me to the section of code so that i can analyze it.

If i remvoe normalize.css from the package the website looks like this:
http://postimg.org/image/w8cv2cv0x/

with it the website looks like this:
http://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/

how do they do that?

Here is the normalize.css file:
https://github.com/necolas/normalize.css/

I am assuming this can be achieved in different ways but i'm looking for the way that it is done with the normalize.css file so that i can understand the concept.

What i have attempted: I have tried to use background-size: for each image but it just makes whichever was the last image that i applied it to becomes the entire background in the back of the other images.

Answer

normalise.css only removes browser default styles without it the body has a preset margin.

so the code that is removing the black edge around it is

body {
     margin: 0;
     }

then the div's with images as backgrounds use

background-repeat: no-repeat;
background-position: 50% 0px;
background-attachment: fixed;
background-size: cover;
height: 100%;
width: 100%;