<div class="d-block position-relative" style="height: 150px; width: 150px; z-index: 1;">
	<div class="a-background">
		<img src="https://placeimg.com/150/150/any" width="150" height="150" loading="lazy" alt="Background">
	</div>
</div>

.a-background {

    background-position: center top;
    background-repeat: no-repeat;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;

    img {

        display: block;
        font-family: "object-fit: contain; object-position: 50% 100%";
        height: 100%;
        left: 0;
        object-fit: contain;
        object-position: 50% 100%;
        position: absolute;
        top: 0;
        width: 100%;

    }

    &--cover {

        background-size: cover;

        img {

            font-family: "object-fit: cover; object-position: 50% 50%";
            object-fit: cover;
            object-position: 50% 50%;

        }

    }

    &--contain {

        background-size: contain;

    }

    &--center {

        background-position: center center;

    }

    &--fixed {

        background-attachment: fixed;
        background-position: center center;

    }

}