JSFiddle - React, Tailwind, and code Playground

by Artem Borovikov

HTML

<div class="block"></div>

CSS

.block {
    height: 400px;
    background-image: url(https://images.unsplash.com/photo-1692627538268-428324157dd9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80);
    background-repeat: no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}

@media (min-width: 960px) {
    .block {
        background-image: url('https://images.unsplash.com/photo-1692727865945-57e1ff91d4fa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2800&q=80')
    }
}