CODEWITHSUNDEEP
css
Phoenix
Phoenix

Reputation: 322

Bootstrap How to add text over image with background?

I am trying to achieve something like

enter image description here

<div class="row">
       <div class="col-md-8 col-md-offset-2">
       <div class="background">
         <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97250&w=350&h=250" class="img-responsive">
       </div>
         <div class="bg-text">
           <h2>testing</h2>
            <h2>Text</h2>
         </div>
       </div>
     </div>

I am not able to apply CSS properly so it stays responsive on small screen also.

Thanks for Helping.

Upvotes: 0

Views: 4850

Answers (1)

ab29007
ab29007

Reputation: 7766

html,body{
  width:100%;
  height:100%;
}
.bigger{
  width:100%;
  height:200px;
  background-image:url('http://images.financialexpress.com/2015/12/Lead-image.jpg');
  background-size:cover;
  background-position:center;
  position:relative;
}
.smaller{
  width:100%;
  height:50px;
  background-color:rgba(0,0,0,0.6);
  position:absolute;
  bottom:0;
  text-align:center;
  color:white;
}
<div class="bigger">
  <div class="smaller">Text Here</div>
</div>

Upvotes: 1

Related Questions