JSFiddle - React, Tailwind, and code Playground

by vjeux

HTML

<div style="background-position: 50% 0%;">0%</div>
<div style="background-position: 50% 25%;">25%</div>
<div style="background-position: 50% 50%;">50%</div>
<div style="background-position: 50% 75%;">75%</div>
<div style="background-position: 50% 100%;">100%</div>

<i style="background-position: 0% 50%;">0%</i><i style="background-position: 25% 50%;">25%</i><i style="background-position: 50% 50%;">50%</i><i style="background-position: 75% 50%;">75%</i><i style="background-position: 100% 50%;">100%</i>

CSS

div {
    width: 580px;
    height: 191px;
    background-image: url(http://pcdn.500px.net/12924655/c002102747b4c7a80844670e291a9bf784ddb514/4.jpg?t=1346495513);
    background-position: 50% 50%;
    background-size: cover;
    margin-bottom: 5px;
    line-height: 191px;
    text-align: right;
    font-size: 40px;
    color: white;
    text-shadow: 0 2px 2px black;
    font-family: Tahoma;
}
html { zoom: 0.50; }

i {
    display: inline-block;
    width: 191px;
    height: 580px;
    background-image: url(http://pcdn.500px.net/12924655/c002102747b4c7a80844670e291a9bf784ddb514/4.jpg?t=1346495513);
    background-position: 50% 50%;
    background-size: cover;
    margin-right: 5px;
    text-align: center;
    font-size: 40px;
    color: white;
    text-shadow: 0 2px 2px black;
    font-family: Tahoma;
}