Align text over the image

Question

I need to align heading text over the image.

So far, It's working since I've used combination of relative, absolute positioning and z-index, but I need to align heading text in specific position, according to content in page.

The .container is bootstrap class.
Content in my page is also inside container class + plus it has it's own class .article-view. This class is divided to .left-side(25%) and .right-side(75%)

I need to align my heading text(.article-heading) on the same horizontal position as content class .right-side has.

With this code, I was able to get the heading text only to left side of the container

Thanks you so much for any helping answer! :)

my HTML:

.article-banner {
  width: 100%;
  float: left;
  position: relative;
}
img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}
.article-heading {
  color: #fff;
  position: absolute;
  z-index: 10;
  float: left;
  width: 35%;
  top: 15%;
  margin-left: 0;
  padding: 15px;
  background-color: rgba(189, 189, 189, 0.4);
}
span {
  text-transform: uppercase!important;
}
h1 {
  font-weight: 100;
}
.article-view {
  width:100%;
  float:left;
  background:#fff;
  border-radius:10px;
  padding:20px 25px;
  margin-bottom:60px;
  margin-top:20px;
}
.left-side {
  width:25%;
  float:left;
  padding-right:30px;
  padding-left:10px;
  margin-top:30px;
}
.right-side {
  width:75%;
  float:left;
  padding-left:40px;
  padding-right:15px;
  font-size:16px;
  line-height:26px;
  min-height:420px;
  margin-top:10px;
  position:relative;
}

<div class="article-banner">
  <div class="container">
    <div class="article-heading">
      <span>october 2015</span>
      <h1>Heading text</h1>
    </div>
  </div>
  <img src="img.png">
</div>

Can you please give us any screenshot of how your output want to be? — Sa Si Kumar, Nov 02 '16 at 12:21

Razia sultana · Answer 1 · 2016-11-02T13:55:19.390

Try this:-

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 200px; 
 
   width: 100%; 
  text-align:center;
}

<div class="image">

      <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg" alt="" />
      
      <h2>A Movie in the Park:<br />Kung Fu Panda</h2>

</div>

or

.article-banner {
  width: 100%;
  float: left;
  position: relative;
}
img {
  width: 100%;
  height: 350px;
  object-fit: cover;
}
.article-heading {
  color: #fff;
  position: absolute;
  z-index: 10;
  float: left;
  width: 35%;
  top: 15%;
  margin-left: 0;
  padding: 15px;
  background-color: rgba(189, 189, 189, 0.4);
}
span {
  text-transform: uppercase!important;
}
h1 {
  font-weight: 100;
}
.article-view {
  width:100%;
  float:left;
  background:#fff;
  border-radius:10px;
  padding:20px 25px;
  margin-bottom:60px;
  margin-top:20px;
}
.left-side {
  width:25%;
  float:left;
  padding-right:30px;
  padding-left:10px;
  margin-top:30px;
}
.right-side {
  width:75%;
  float:left;
  padding-left:40px;
  padding-right:15px;
  font-size:16px;
  line-height:26px;
  min-height:420px;
  margin-top:10px;
  position:relative;
}

<div class="article-banner">
  <div class="container">
    <div class="article-heading">
      <span>october 2015</span>
      <h1>Heading</h1>
    </div>
  </div>
  <img src="http://keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image1.jpg">
</div>

Sorry, now I saw your second snipped This is what I need, just I need to have content aligned 25% from left side, to have it right above div, which has 75% — JZK, Nov 02 '16 at 13:58
Check this link:-http://stackoverflow.com/questions/2861247/center-aligning-a-fixed-position-div or link:- http://stackoverflow.com/questions/18907514/left-floated-div-place-below-another-div — Razia sultana, Nov 02 '16 at 14:07
Oki guys, Finally, I've found a solution. I've put container inside absolute positioned div, and inside container, I've made all necessary positioning. It's working. Thank you for all hints :) — JZK, Nov 02 '16 at 16:35

Align text over the image

1 Answers1