JSFiddle - React, Tailwind, and code Playground

HTML

Image d'origine :<br>
<img src="http://placehold.it/200x50" alt="" title="Texte image">
<br>

Image découpée dans deux div :<br>
<div class="zone zone1" title="Texte zone 1"></div>
<div class="zone zone2" title="Texte zone 2"></div>

CSS

.zone {
  float: left;
  width: 100px;
  height: 50px;
  background-image: url(http://placehold.it/200x50);
  background-size: 200px 50px;
  border: solid 1px black;
}

.zone1 {
  background-position: 0 0;
}

.zone2 {
  background-position: 100% 0;
}