Put text over picture to fit responsive page - html

Question

I was trying to put some text over a picture, but I don't want to set background-image.
I've created a jsfiddle to illustrate what I did, and I use bootstrap3.
In the mobile size, it can display fine like
But if I resize the browser width, it will be broken.
html
<div class="col-xs-12 visible-sm-block visible-xs-block" style="text-align: center;">
<p class="competion_text">
This is inside the competiontion Box!
<br> Second line
<br> Third line
</p>
<img src="http://i.imgur.com/NajXOdH.png">
</div>
CSS
.competion_text {
text-align: center;
position: relative;
top: 252px;
left: 7px;
max-width: 225px;
color: #FFCF83;
font-size: 10pt;
}

Answer 1

/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.holder {
position: relative;
width: 230px;
margin: 0 auto;
}
.competion_text {
position: absolute;
top: 180px;
left: 0;
width: 100%;
text-align: center;
color: #FFCF83;
font-size: 10pt;
z-index: 2;
}
<div class="col-xs-12 visible-sm-block visible-xs-block holder" style="text-align: center;">
<p class="competion_text">
This is inside the competiontion Box!
<br> Second line
<br> Third line
</p>
<img src="http://i.imgur.com/NajXOdH.png">
</div>
I put another class on the parent. (.holder)
Try this. Hope it helps!

Answer 2

Try something like this.
.competion_text {
text-align: center;
position: relative;
top: 252px;
margin: 0 auto;
max-width: 225px;
color: #FFCF83;
font-size: 10pt;
}
Here is workin jsfiddle

Answer 3

Try as below, Set your parent element i.e .col-xs-12 position as position:relative and child i.e. .competion_text position as position:absolute thus this aligns your text in the center of image, Now I have used CSS calc() function in top positing to align it vertically in center and that always stays there.
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.col-xs-12{
width:auto;
height:auto;
margin:auto;
text-align:center;
position:relative;
}
.col-xs-12 > .competion_text {
position: absolute;
top: calc(100% - 30%);
left: 0;
width: 100%;
height:auto;
color: #FFCF83;
font-size: 10pt;
text-align:center;
}
<div class="col-xs-12 visible-sm-block visible-xs-block">
<p class="competion_text">
This is inside the competiontion Box!
<br> Second line
<br> Third line
</p>
<img src="http://i.imgur.com/NajXOdH.png">
</div>