JSFiddle - React, Tailwind, and code Playground

by joopmicroop

HTML

<div id="one"></div>
<div id="two"> </div>
<div id="tree"> </div>
<div id="four"></div>
<div id="five"></div>

CSS

div{
    border:1px solid red;
    width:300px;
    height:100px;
    background-image:url(http://www.meddybemps.com/images/SCtop2.gif);
    background-repeat:no-repeat;
    background-size: cover;
    margin : 10px;
}

#one{
    background-position:0 0%;
}
#two{
    background-position:0 50%;
}
#tree{
    background-position:0 100%;
}
#four{
    border: 2px dotted yellow;
    background-size: contain;
}
#five{
    border: 2px dotted yellow;
    background-size: cover;
}