Responsive Text block on top of image - html

Question

I would like to place a responsive text block on top of an image that I have set up based on this dated tutorial and amended based on this previous question.
Unfortunately there appears to be a couple of bugs. the span.spacer used to create padding either side of the line break appears taller than the rest of the text block, and I also think it is causing the text to not align left correctly. The development page can be viewed here. You can see a taller black block at the end of the first line of text, and a taller black block at the beginning of the second line.
The CSS i'm using is
}
.image {
position: relative;
width: 100%; /* for IE 6 */
}
.image h2 {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
text-shadow: none;
}
h2 span {
color: #fff;
font-size: 110%;
width: 40%;
line-height: 110%;
padding: 0 20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
}
h2 span.spacer {
padding:0 5px;
}
The HTML is
<div class="image">
<img alt="Trekking" src="http://davidkneale.com/wc/wp-content/uploads/borneo_trek_mock.jpg" />
<h2><span>Trekking:<span class='spacer'></span><br />
<span class='spacer'></span>It's a Jungle Out There</span></h2>
</div>
Any advice on a fix for this or a better way to do it much appreciated!

Answer 1

It is becase you have span element in another span element (they are overlaid) and CSStyle is applied to both.
I think you can modify selector to: h2>span {...},
You can use one span element for each line (each with diferent look):
<h2>
<span class="big">Trekking:</span>
<br>
<span>It's a Jungle Out There</span>
</h2>
h2 span {
color: #fff;
font-size: 110%;
line-height: normal;
padding: 0 20px;
background: rgb(0, 0, 0); /* fallback color */
background: rgba(0, 0, 0, 0.7);
display: inline-block;;
}
h2 span.big {
font-size:130%;
}
Width 40% was too short.

Answer 2

The reason for the increased height is the span within a span causing the font-size 110% to be applied twice. Set font-size 100% on the spacer.
You also probably want an increased line height (more like 140% than 110% with the font you're using), and a spacer padding of 10px to match the 20px of the start/end. It does feel like there should be a simpler way to do this!

Answer 3

You are right, this tutorial is quite outdated – I would not bother with that “spacer-span” mumbo-jumbo at all.
And while it is not possible to have a horizontal padding applied to each line of an inline element (it’ll only be applied before the first and after the last line) – it is possible to use box-shadow to achieve a similar effect (as long as only a background color is required, and not f.e. an image).
<div>
<img src="http://davidkneale.com/wc/wp-content/uploads/borneo_trek_mock.jpg">
<h2><span>Trekking:
It’s a Jungle Out There</span></h2>
</div>
div { position:relative; }
img { display:block; max-width:100%; }
h2 { position:absolute; bottom:0; left:.5em; white-space:pre; line-height:1.333; }
h2 span { padding:.125em 0 .125em .25em; background:rgba(0,0,0,.75); color:#fff;
box-shadow:-.5em 0 0 rgba(0,0,0,.75), .5em 0 0 rgba(0,0,0,.75); }
See it here in this fiddle: http://jsfiddle.net/FXJEL/
I gave the span element a padding-left here to have the first line of text be slightly moved to the right, as in your example – assuming that is a desired effect; if not, simply remove it.
And instead of using a <br> to break the text into two lines, I used
for a line break character, and white-space:pre to have it displayed as such. But feel free to change that back to using a br element if that seems more convenient.
The span element inside the h2 is necessary here to have an inline element, because only that will behave like this regarding the element dimensions; under normal conditions, one could of course make the h2 display as inline, but that does not work here, because the h2 is positioned absolutely, and that “overwrites” display:inline, and one would end up with a box that is as wide as the whole text.