Scroll page parallax when I click on navigation menu (Parallax Scrolling)

HTML & CSS
25

Food for thought.

Does class="image" apply to more images than just these background images? (Yes or No)

IF Yes, THEN add a new class to the background images such as bgimage and apply background-position and background-repeat to class="bgimage" and remove the styles from within the tags.

example:

bgimage {
    background-position: 0px 0px; 
    background-repeat: no-repeat;
}

<div data-stellar-background-ratio="0.5" class="image bgimage" id="nav1" ></div>

IF No, THEN add background-position and background-repeat to class="image" and remove the styles from within the tags.

example:

image {
    ...other image styles...
    background-position: 0px 0px;  /* new properties added after existing properties */
    background-repeat: no-repeat;  /* new properties added after existing properties */
}

<div data-stellar-background-ratio="0.5" class="image bgimage" id="nav1" ></div>

Either way, styling the background-images as a class is easier and more efficient than styling each one inline.