JSFiddle - React, Tailwind, and code Playground

HTML

<div id="loginbackground">
<form>
    <input type="text" name="username" id="username">
    <input type="password" name="pwd" id="pwd">
</form>
</div>

CSS

#loginbackground{
    width:100%;
    height:100%;
    position:fixed;
    top:0px;
    left:0px;
    background: url(http://ivojonkers.com/loginscreentemp.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.myBackground.jpg', sizingMethod='scale');
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='myBackground.jpg', sizingMethod='scale')";
}
#loginbackground form{
    width:18.667%;
    height:7.466%;
    position:absolute;
    top:51.4%;
    left:50%;
    margin-left:-8.867%;
}

#loginbackground input{
    width:100%;
    height:31.25%;
    background-color:#F00;
    border:none;
    font:Georgia, "Times New Roman", Times, serif;
    font-size:18px;
    position: absolute;
}