Responsive html with absolute position text inside relative positon picture - html

Question

What I'm trying to do, is an HTML page split in two colors and
position a resizable image in the middle and on top show some positioned text.
I've managed to do it, but the problem is that when I resize the window,
image resizes just fine, 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>
jsfiddle
Some help would be really appreciable...

Answer 1

Use img tag instead of background-image, we can set size of container tag by size of img tag.
HTML
<div class="main">
<div class="folder">
<img src="https://s22.postimg.org/qi3kmv39d/folder.png">
<div class="foldername">Test Username</div>
</div>
</div>
CSS
.main {
/*...*/
display: flex;
align-items: center;
}
.folder {
position: relative;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.folder img {
display: block;
height: auto;
width: auto;
max-width: 50vw;
max-height: 50vh;
}
.foldername {
position: absolute;
top: 5%;
left: 5%;
-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: 3vmin;
}
Try this:
http://jsfiddle.net/w1om0h0o/2/
Hope it can help