My goal is to create an HTML page with two colors, a resizable image in the center, and positioned text on top.
I have achieved this, but the issue arises when I resize the window - the image resizes correctly, but the text div loses its position.
.main {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
margin: auto;
border-radius: 0;
background: linear-gradient(to bottom, #f1b900 0%, #f1b900 50%, #000000 50%, #272660 50%, #272660 100%);
/* W3C */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: -3px 0 6px #4a5562;
-webkit-box-shadow: -3px 0 6px #4a5562;
box-shadow: -3px 0 6px #4a5562;
-moz-transition: all 300ms;
-webkit-transition: all 300ms;
width: 100%;
transition: all 300ms;
height: 100%;
}
.folderimg {
box-sizing: border-box;
background: url("folder.png") center center no-repeat;
background-size: contain;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 75%;
height: 75%;
z-index: -1;
}
.foldername {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-55eg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
filter: progid: DXImageTransform.Microsoft.BasicImage(rotation=3);
font-size: 4vmin;
position: absolute;
margin-top: 5%;
margin-left: 12%;
}<div class="main">
<div class="folderimg">
<div class="foldername">Test Username</div>
</div>
</div>Any assistance would be greatly appreciated...