[Resolved] responsive text wrap align + transparent background + solid text on centred div

[theonetruevlad]

Aim: to have a centred div with fluid width that has a semi translucent background with solid text and remains centred on smaller screens after text wrapping.

Issue: When the screen becomes small enough for the text to wrap the solid text shifts right instead of remaining centred.

<div id="divboxtable">
  <div id="divboxcell">
    <div id="divbox">
      <div class="divtxtbck">
        <h1>WHAT AM I DOING WITH MY LIFE!</h1>
      </div>
      <div class="divtxtfor">
        <h1>WHAT AM I DOING WITH MY LIFE!</h1>
      </div>
    </div>
  </div>
</div>

#divboxtable {
  display: table;
  text-align: center;
  width: 100%;
  height: 100%;
}

#divboxcell {
  display: table-cell;
}

#divbox {
  display: inline-block;
  zoom: 1;
  position: relative;
  -moz-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
}

.divtxtbck {
  background-color: #fffffa;
  padding: 0 10px 0 10px;
  -moz-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  filter: alpha(opacity=50);
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
  -moz-opacity: 0.50;
  opacity: 0.5;
}

.divtxtbck h1 {
//  visibility: hidden;
  color: red;
}

.divtxtfor {
  position: absolute;
  top: 0;
  left: 10px;
}

I have commented out the hidden nature of the background text so you can see how the alignment differs. The issue seems to be because of the absolute positioning – but how do you overcome this left align issue when the text wraps?

Fiddle You MUST make the output window narrow until the text wraps – then you will see the solid text is not centred the same as the transparent text.

[Tom]

Are you trying to sit one set of text directly over the other?

[theonetruevlad]

I was trying to overlay the two because that was the solution I found on Stackoverflow. But I now realise that using RGBA for the background saves all the hassle. I was surprised there wasn’t a simple solution and it turns out there was all along! No idea why the layered text solution was put forward, but it distracted me. All good now thanks.

[Tom]

No problem! Glad you found a better solution 🙂

[Author]

Posts