The idea is just to overlay some text over an image, but as blocks that stick out from the left with an even amount of padding all the way around the variable-length text. Here is a screenshot example:

textoverimageexample

The Schematics

scematics

The HTML

Putting the image in as a background image of the wrapping div would be easier, but in this scenario I see the images as content, and thus belongs in the HTML. We’ll use that wrapping div as a container for absolute positioning.
The CSS

This is going to put our text right up on top of the image nicely, but it doesn’t accomplish the transparent black box we want to achieve behind the text. For that, we can’t use the h2, because that is a block level element and we need an inline element without an specific width.

Let’s wrap the inside h2 of the in a span:

The use that span to style the text and background:

Problem

textoverimage-problem

When an inline element breaks, the block breaks immediately after the last character in the line, and begins immediately flush left on the next line. Padding, in this case, does not help us.

To solve this, we’ll apply some more spans on either side of the
element to simulate that padding.

Those new spans we’ll use to apply padding:

Fixing Semantics

At this point the design is accomplished, but there there is an awful lot of extra HTML elements added purely for design reasons. Namely, all those spans. jQuery can jump in and save us here. Simply remove all the spans from the markup, and dynamically apply them like this:

**(http://css-tricks.com/text-blocks-over-image)**
(Visited 2 times, 1 visits today)