How do I add my text inside the border? - html

Question

I am trying to get my text within my border that I added as an image. I will be adding more text and would like it to show up in my border as I am writing it. Any help would be appreciated. Thanks!
li {
list-style-type: none;
display: inline-block;
font-size: 20px;
letter-spacing: 4px;
width: 150px;
}
.main-nav a {
text-decoration: none;
}
.main-nav {
border-bottom: 2px solid black;
border-top: 2px solid black;
}
a:link {
color: #008B00;
}
a:visited {
color: #008B00;
}
p {
font-size: 20px;
}
#main-border {
text-align: center;
}
.searchbutton {
font-size: 20px;
}
<div id="main-border">
<p>Hi! My name is Marika and I am excited to join the school soon!</p>
<img src="../desktop/background.gif" alt "border" height="500px" width="550px">
</div>

Answer 1

I could not understand your question but i think this is what you are looking for :
<div id="main-border">
<p>Hi! My name is Marika and I am excited to join the school soon!</p>
</div>
#main-border {
text-align: center;
background : url(../desktop/background.gif);
background-size : 100% 100%;
min-height : 500px;
min-width : 500px;
}

Answer 2

like this? obviously style to your liking
var place=document.getElementById('txtplace');
function add_text(txt){
place.innerHTML=txt;
}
#txtplace{background-color:grey;opacity:0.8;font-size:150%;position:absolute;top:100px;left:50px;}
<input type="text" id="text_to_add" onkeyup="add_text(this.value);"/>
<span id="txtplace"></span>
<img src="http://lorempixel.com/600/600" id="background">

Answer 3

I believe this is what you're looking to achieve (although, instead of a picture of a kitten, your image)
.THIS {
background-image: url(http://placekitten.com/g/500/500);
background-repeat: no-repeat;
height:500px;
width:500px;
}
<div id="main-border">
<p class="THIS">Hi! My name is Marika and I am excited to join the school soon!</p>
</div>

Answer 4

Late answer but if you are trying to add text in the border you can absolute position it and do it like this http://jsfiddle.net/vo7jzz4m/
div{
width:250px;
height:250px;
background:url('http://placekitten.com/300/301') no-repeat;
background-size:cover;
border:10px solid transparent;
outline:1px solid green;
}
div:before{
top:0px;
position:absolute;
content:"aA";
}