BJGG: Scale and crop tall background images for smaller screens

bjgg-crop-mobile-images.css

/* Scale and crop tall background images for smaller screens */
@media (max-width: 767px) {
    .opening.homepage .row {
        background-image: none;
    }

    .opening.homepage .mt {
        height: auto;
        padding: 0 0 90%; /* Lower this value as the image gets too tall */
        background-image: url("http://stg-bjgg.cottontest.com/resources/~style/../%7Eimg/home/Home-opening-750x700.jpg");
        background-size: 100% auto;
        background-position: center; /* As you lower the padding, adjust the position to make sure the focal point of the image is still visible */
    }
}

@media (min-width: 520px) and (max-width: 767px) {
    .opening.homepage .mt {
        padding: 0 0 60%;
        background-position: top 10% center;
    }
}