Coda Chang Coda Chang - 1 month ago 7
Sass (Sass) Question

Put text over picture to fit responsive page

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

enter image description here

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

/* 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!