#mainPage.mobile .contentImage { height: 10ex; // It's a good idea to make these smaller on mobile. } .contentImage { background-size: contain; background-repeat: no-repeat; background-position: center center; height: 25ex; // size in ex guarantees the image will look about the same size on every screen &:hover { cursor: pointer; &:active { opacity: 0.7; } } } #imageViewer { display: none; background-size: contain; background-repeat: no-repeat; background-position: center center; height: 100%; width: 100%; position: fixed; z-index: 1000000; top: 0px; left: 0px; margin: 0px; background-color: rgba(0,0,0,.8); &:hover { cursor: pointer; } } .image001 { &.contentImage { // define height for content image height: 3em; } //background-image: inline-image("001.png"); background-image: url("https://i.imgur.com/EvUe1bv.png"); } .introLogo { background-image: inline-image("IntroLogo.svg"); }