CSS Help Background Image URL Parallax

jbriginshawphoto

Hi there,

I am trying to Recreate this on my website: https://gallery.imagesinthebackcountry.com/Smugmug-customization/SmugMug-Customization-Demos/Fixed-Scrolling-Demo/n-NHNZ5K

When I work with the CSS code provided from the website and start to recreate it with my own background images, my images won't show up. What am I doing wrong?

p,
h2,
h3 {margin: 0 auto 1.5rem;}

p {line-height: 1.5;}

.sm-page-widget .sm-page-widget-content {margin: 0;}

.container {
position: relative;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

.container--image-01 {
background-image: url ("https://photos.smugmug.com/photos/i-TwrzrmJ/1/14c734b2/M/i-TwrzrmJ-M.jpg");
min-height: 100%;
}

Hikin' Mike

Without seeing your site, I have no idea.

jbriginshawphoto

That would help! Here it is: https://www.jbriginshawphotography.com/New-Homepage/n-dHm7GT

Hikin' Mike

EDIT: Sorry, I had a typo in the code. It should have read 100vh and not 100%:

.container--image-01 {
    background-image: url(https://photos.smugmug.com/photos/i-TwrzrmJ/1/14c734b2/M/i-TwrzrmJ-M.jpg);
    min-height: 100vh;
}

I assume that photo is just a test because it's too small to display without pixelating.

Also these are not photos:

.container--image-02 {
    background-image: url(https://www.smugmug.com/app/organize/JBriginshaw-Logos-Bridget-2017/i-TwrzrmJ);
    min-height: 400px;
}
.container--image-03 {
    background-image: url(https://www.smugmug.com/app/organize/JBriginshaw-Logos-Bridget-2017/i-TwrzrmJ);
    min-height: 400px;
}

jbriginshawphoto

Thank you!! it was totally the 100vh. Much appreciated.