How do you get an image to stick to the bottom of a page?

Hello there, 

I am struggling with sticking my hero images to the bottom of my site pages. I would like my two images in this simple site to be flush with the bottom of each page so that users may not scroll below them. I've been trying some lines of code from other posts, but so far nothing has worked.

This is the code I've been trying. 

/* image to bottom */
@media screen and (min-width:768px) {
[data-section-id="60280e1ac467c7682a023318"] .content-wrapper {
    padding-bottom: 0 !important;
}
div#page-section-60280e1ac467c7682a023318>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
}
div#block-yui_3_17_2_1_1614258722517_6384 {
    padding-bottom: 0;
}
}

The password to this private site is currently "password"

Any advice on what might work? 

Thanks!

URL for the site?

https://melissakopplin.squarespace.com/

Are you wanting the images to stick to the bottom of the viewport? Or do you want the image to be at the bottom of each page of the site.

The first, I'd like for each image to stick to the bottom of their own individual pages, not each page of the site.