I'm trying to figure out how to add in (or layer ontop of) text over an image correctly.
This is how it looks like in my result.
I actually want the text in the correct order instead of centered cause everytime I change the code or remove the border, the text just straight up disappears with no rhyme or reason.
Also here's the code I was using by the way.
<div class="center">[[File:GIFinnbg.png]]<div style="position:relative; bottom: 999px; width:999px; height:999px; line-height:999px; text-align:center; border:medium solid;">
===Tutorial===
BF and GF just got into the stage and get ready for their next adventurous rap battle. BF noticed when they got there that he forgot his hat and didn't have anything to cover it up so now he's hatless. GF tells him not to worry about it to much, so they decided to have a little song to pass the time before the next rap battle.
</div></div>
EDIT: Nvm I found out that you have to use the position to be absolute.
<div style="position:absolute; z-index:-1; top:0; left:0; right:0; bottom:0;">[[File:GIFinnbg.png|{{{Size|2500px}}}]]
===Tutorial===
BF and GF just got into the stage and get ready for their next adventurous rap battle. BF noticed when they got there that he forgot his hat and didn't have anything to cover it up so now he's hatless. GF tells him not to worry about it to much, so they decided to have a little song to pass the time before the next rap battle.
</div>
This DOES fix the problem sure
But then comes the next big issue at hand. when the absolute position is set, for some reason, all of the text from the div, ESPECIALLY the image just sets itself all the way to the top of the page, EVEN when its in a tabber it doesn't stay in the correct spot. even when the image is fixed with the following code: <div style="position: relative; height: 999px; border: 1px solid black;">
The TEXT JUST DISAPPEAR FOR NO REASON.