BootStrap Responsive Background image with text on it is not working - html

Question

I'm getting started with BootStrap 3 and trying to use a background image with text on it. At same time I want it to be reponsive but it seems there is some issue with the way I implemented it. I'm able to get it work for normal desktop but when I try to emulate on a mobile device, text goes outside of background image.
http://jsfiddle.net/cn5guyt4/2/
<div id="front-landing">
<div class="container jumbotron hero-unit">
<h2 class="h1"><span>"Sample Test"</span></h2>
<h3 class="-sub-title">
<span>"Sample Test text 2"</span>
</h3>
</div>
</div>
.hero-unit {
position: relative;
margin-bottom: 0;
margin-top: 15px;
background: url('http://1.bp.blogspot.com/-P5uqUWLgZmA/UtQDdtahipI/AAAAAAAAF3E/IgvARwfxAlw/s1600/seamless-stone-background.jpg') 50% 80% no-repeat;
background-size: 100%;
min-height: 700px;
}
.h1 {
font-size: 2.625em;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 0.571em;
margin-top: 2em;
text-align: center;
}
.-sub-title {
font-weight: 400;
text-align: center;
}
h2 span {
background-color: white;
}
h3 span {
background-color: white;
}
Can someone help me to figure out what am I doing wrong here ?
Thanks

Answer 1

In your hero-unit class, the background-size set to 100% but it should be cover instead. That made a huge difference: see bootply.
I think what you are really trying to do is get the jumbotron of bootstrap to have a background picture. Why is your jsfiddle code different from the code you posted here? there is a wild margin of difference. My fix is using the code above.
Working bootply
<div id="front-landing">
<div class="container jumbotron ">
<h2 class="h1"><span>"Sample Test"</span></h2>
<h3 class="-sub-title">
<span>"Sample Test text 2"</span>
</h3>
</div>
</div>
.h1 {
font-size: 2.625em;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 0.571em;
margin-top: 2em;
text-align: center;
}
.jumbotron{
background-image: url('http://1.bp.blogspot.com/-P5uqUWLgZmA/UtQDdtahipI/AAAAAAAAF3E/IgvARwfxAlw/s1600/seamless-stone-background.jpg');
background-size: cover;
}
.-sub-title {
font-weight: 400;
text-align: center;
}
h2 span {
background-color: white;
}
h3 span {
background-color: white;
}

Answer 2

you can set image as a background-image
.imageAndText img{
width: 100%;
background: no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
for text you can use col-xs-12 or work write individual media query