JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    <figure class="bg">
        <h2>helloe</h2>
        <img src="http://placehold.it/600x400"/>
    </figure>
</article>

CSS

html, body {
    height: 100%;
}

body {
    margin: 0;
}

article {
    height: 100%;
    position: relative;
    overflow: hidden;
}
h2{position:relative;}
.bg {
    position: absolute; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;
    margin: 0;
}
.bg img {
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%;
    min-height: 50%;
}