body { height: 100vh; width: 100vw; } .past { background: url("https://raw.githubusercontent.com/huijing/filerepo/gh-pages/bg-home-1965.jpg") 50%; background-size: cover; width: 100%; height: 100%; position: fixed; } .present { background: url("https://raw.githubusercontent.com/huijing/filerepo/gh-pages/bg-home-2015.jpg") 50%; background-size: cover; width: 100%; height: 100%; position: absolute; z-index: 2; opacity: 1; -webkit-transition: opacity 1.5s ease-out; transition: opacity 1.5s ease-out; } .fade { opacity: 0; } button { position: absolute; z-index: 3; background: rgba(0, 0, 0, 0.3); border: 2px solid rgba(255, 255, 255, 0.7); color: white; top: 1rem; padding: 0.5rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); cursor: pointer; }