JSFiddle - React, Tailwind, and code Playground

by vivek11432

HTML

<h5>
Original Sprite Image
</h5>
<img id="home" ><br><br>
<img id="next" >
<br><br>
<h5>
Resized Sprite Image
</h5>
<img id="resizedHome" ><br><br>
<img id="resizedNext" >

CSS

#home {
    width: 46px;
    height: 44px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
}

#next {
    width: 43px;
    height: 44px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -91px 0;
}


#resizedHome {
    width: 20px;
    height: 20px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) 0 0;
    background-size: 306%;
}

#resizedNext {
    width: 20px;
    height: 20px;
    background: url(https://www.w3schools.com/css/img_navsprites.gif) -102px 0;
    background-size: 306%;
}