带有文本的BootStrap响应式背景图像不起作用

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