Text in a line or how to defeat a designer

Hello

Each layout designer at least once had to deal with the task of placing text inside a line.
For example, like this:



There is never a problem if the background is solid. But what if the background is a picture like in this example?
I suggest that I bring to your court the following decision. Maybe someone will suggest additions or make comments, I'm only FOR.

Example: link

The essence of the solution is as follows:

- we make a wrapper with a background image and do it overflow-hidden (to hide the extra parts of the lines)
- inside we insert a wrapper for the heading in which we center the text block (text-align: center)
- a block in which text do relative positioning (position: relative) and display: inline-block
- we put two lines inside the text box, for example tags
- we make positon: absolute, obviously large width (for example 1000% of the parent block) and top: (X) px (to align the line with the center of the text)
- then position it one by one lines are 100% left for the right line and right for the left
- indents from the text to the lines are padding.

Waiting for your answers.