JSFiddle - React, Tailwind, and code Playground

by Michel Penke

HTML

<div class="backgroundimage"></div>

CSS

.backgroundimage {
  width: 100%;
  height: 500px;
  background-repeat: none;
  background-size: cover;
  background-position: center center;
}

@media only screen and (max-width: 600px) {
  .backgroundimage {
    background-image: url('https://source.unsplash.com/user/_k_arinn/800x600');
  }
}

@media only screen and (min-width: 600px) {
  .backgroundimage {
    background-image: url('https://source.unsplash.com/user/jordancormack/800x600');
  }
}