I am using Bootstrap and my image response dynamically, but I am having trouble adding text to it. I would like to use a jQuery typewriter plugin for the text on the image, which should resize according to screen size. Here is my HTML code and I have used this jQuery plugin:
<div class="container-fluid">
<div class="row-fluid">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 centerimg">
<img class="img-responsive" src="img/headerBackground.jpg">
<div class="wrap">
<div class="type-wrap">
<div id="typed-strings">
<span>Typed.js is a <strong>jQuery</strong> plugin.</span>
<p>It <em>types</em> out sentences.</p>
<p>And then deletes them.</p>
<p>Try it out!</p>
</div>
<span id="typed" style="white-space:pre;"></span>
</div>
</div>
</div>
</div>
</div>
Here is the CSS I am using to position the text on my image:
.col-lg-12.col-md-12.col-sm-12.col-xs-12.centerimg{
display:block;
margin:auto;
position: relative;}
.col-lg-12.col-md-12.col-sm-12.col-xs-12.centerimg p{
position: absolute;
top: 2%;
left: 2%;}
I would greatly appreciate any assistance in achieving this. I want the jQuery plugin text on the image right in the center.